CSS Background image with PHP variable?

Question

In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:

<?php if(function_exists('show_media_header')){ show_media_header();} ?>

This basically calls the image assigned and places it as an IMG in HTML. I would like to have it called as a background image with CSS but don't know how. For example:

.header-graphic{ background:url("show_media_header();"); }

I know that will obviously not work but that should explain what I'm trying to do.

Any help would be great. Thanks!

wordpress.stackexchange.com/questions/98880/…

falcon
– falcon

2014-05-19 20:02:12 +00:00
Commented May 19, 2014 at 20:02 — falcon
– falcon, Commented May 19, 2014 at 20:02

Tommy Ivarsson · Accepted Answer · 2014-05-19 19:56:38Z

2

Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:

.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }

However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.

answered May 19, 2014 at 19:56

Tommy Ivarsson

6054 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabiano Over a year ago

Nop, that would result into .header-graphic{ background:url("<img src='something.png'>"); }

crobley Over a year ago

Thanks for the help! I tried it but nothing appears? This is what I have: <style type="text/css"> .header-graphic-background { background:url("<?php echo show_media_header(); ?>"); } </style>

Izkata · Accepted Answer · 2014-05-19 20:22:58Z

2

It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.

However, there is an alternative: Insert just that style into the HTML like so:

<h3 style='background-image: url("<?= show_media_header(); ?>");'>
   Foo
</h3>

Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:

h3 {
   background-position: left 3px top 3px;
}

This of course assumes the function returns just the image URL; I've not used Wordpress personally.

Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:

<h3>
   <?= show_media_header(); ?>
   Foo
</h3>

And style it as appropriate like so:

h3 img {
   margin: 3px 0 0 3px;
}

edited May 19, 2014 at 20:22

answered May 19, 2014 at 19:58

Izkata

9,3932 gold badges44 silver badges53 bronze badges

2 Comments

crobley Over a year ago

Ok so would I do something like this? <div style="background-image: url("<?= show_media_header();");"> My code blows up when I do that. Don't I need to close the php tag somewhere?

Izkata Over a year ago

@crobley Yes, I made a typo

Fabiano · Accepted Answer · 2014-05-19 19:59:43Z

1

I'm gonna post it down here because no one is considering your statement:

"and places it as an IMG in HTML"

You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.

answered May 19, 2014 at 19:59

Fabiano

9326 silver badges19 bronze badges

2 Comments

crobley Over a year ago

Heres what I found: echo '<img src="'.$dhnd_image_url_base.$load_this_media.'" alt="'.$dhnd_alt_tag.'" title="'.$dhnd_alt_tag.'" />'; How can I change that to be a background image?

Fabiano Over a year ago

You can either change it for a

echo "<div style='background-image: url(" . $dhnd_image_url_base . $load_this_media . ")' title='".$dhnd_alt_tag."'></div>"

or you can replace that echo for return $dhnd_image_url_base . $load_this_media and instead of call show_header_image(); on header.php, you write a div or other element, with style="background-image:url(". show_header_image_bg() . ")"

collardeau · Accepted Answer · 2014-05-19 20:06:30Z

0

How about if you use descendant CSS selectors as such:

#page #header {
   background-image: url("image.jpg");
}

#another-page #header {
   background-image: url("another-image.jpg");
}

and so assign each page to its background image.

Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.

answered May 19, 2014 at 20:06

collardeau

8208 silver badges13 bronze badges

Comments

crobley · Accepted Answer · 2014-05-19 20:32:28Z

0

Got it to work!

Dug around in the plugin PHP file and found this:

function get_media_header_url() {
global $post;
$post_id = $post->ID;

So I did this:

.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }

Works great! You guys absolutely pointed me in the right direction. THANKS!!!

answered May 19, 2014 at 20:32

crobley

312 silver badges5 bronze badges

Collectives™ on Stack Overflow

CSS Background image with PHP variable?

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related