Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've been playing with the wp custom header and background options.

I like the way you can tile a small image for the background, and looking for a way to add that option to the custom header image as well.

My theme has a div for the header and I've added the wp custom header like so:

<div class="header">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>"    width="<?php echo get_custom_header()->width; ?>" alt="" '/> 

I can sort of understand that the script is calling for the image src, width & height values entered in the add custom header dialogue, but could use some help to persuade the chosen image to tile.

I tried something like this, but didn't work...

 <div class="art-header" style="background-image:url('<img src=<?php header_image(); ?>');> background-repeat:repeat;">

I don't really need the "tile" dialogue when setting the header in wp backend, but just want it to tile automatically if the uploaded image is less than the size of the div

Thanks

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

You are putting an image into the style attribute - this is wrong. You only need the path, not a tag:

<div class="art-header"
style="background-image:url('<?php header_image(); ?>'); background-repeat:repeat; height:<?php echo get_custom_header()->height; ?>px; width:<?php echo get_custom_header()->width;?>px;">
</div>

After seeing the issue at hand, I would instead suggest this:

your HTML: <div class="art-header">....</div>

Anywhere on the same file (or header.php):

<style type="text/css">
div.art-header, div.art-header::after {
background-image:url('<?php header_image(); ?>');
background-repeat:repeat;
height:<?php echo get_custom_header()->height; ?>px;
width:100%;
}
</style>
share|improve this answer
    
Hey - thanks for getting back to me & explaining my bad code. Unfortunatley it's not working though. I set the width of the custom header image to 200px, hoping it would tile, but no luck :( Image seems to get picked OK, but nothing shows in the header.Any ideas what to try next? –  speedypancake Nov 1 '12 at 14:59
    
Do you have a working example I can look at? It's best if you could look at what is being spit out for that div's style attribute. Use Firebug in Firefox, or Inspect Element in Chrome. –  Eric Holmes Nov 1 '12 at 15:01
    
Give me a minute... –  speedypancake Nov 1 '12 at 15:03
    
OK, I've put the original code back in. I didn't include it all in my question so it probably needs the height & width to be specified? This is what I have right now: <div class="art-header> <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt=""/> It is showing a 200px X 250px image in the header - tinyurl.com/a8cxors Thanks –  speedypancake Nov 1 '12 at 15:14
    
I have updated my answer's code above. Give it a try and I will look at the site again if it's not working. –  Eric Holmes Nov 1 '12 at 15:39
show 4 more comments

If you add the image to the HTML like that, you won't get it to tile. In order to get an image to tile is has to be a background image, so you need to add it via a CSS rule.

If I understand what you've done, you need to add the height and width to the header class and place your image as a background image on that div. For both of these you need to write some CSS. In order to use the setting you have in your theme, you will need to create the CSS in PHP and insert it into the header of your page.

function my_inserted_css() { ?>
<style type="text/css">
.header {
  height:<?php echo get_custom_header()->height;?>px;
  width:<?php echo get_custom_header()->width;?>px;
  background-image:url('<?php header_image(); ?>') background-repeat:repeat;"
}
</style> <?php
}

The 'height' and 'width' would be the container size not the size of the image you want to tile.

And insert it by hooking to wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'my_inserted_css' );

All of this would go in your theme's functions.php file.

share|improve this answer
    
Thanks for your suggestion, but I'm a bit out of my depth here. I would add all the code to my functions, and change .class to the header div? Totally lost about "create the css in PHP & insert into header" bit I'm afraid ;-) –  speedypancake Nov 1 '12 at 15:33
    
Edited my code so the class matches your existing code. Everything goes in your theme's functions.php and your 'header' div should not have the 'img' tag at all. –  s_ha_dum Nov 1 '12 at 15:40
    
Copy the function block and "add_action" line above into your functions.php file (anywhere in your functions.php file!). Basically this is using WordPress's built-in hooks to add a few lines of code to your site. You should then change <code>.class</code> to <code>.art-header</code> (if the div you'd like to edit is that class). You should be good to go! –  guiniveretoo Nov 1 '12 at 15:42
    
Thanks for your patience - I am trying to learn all the time. Will give this a go & report back. –  speedypancake Nov 1 '12 at 15:47
    
The other solution seems to be working, but I'll come back to your idea and see if I can get it to work which will give me a couple of options - Thanks again –  speedypancake Nov 1 '12 at 15:54
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.