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 am using Sunrise Theme from s5themes.com , and I was wondering if in the individual pages I can have a different Header Image, because from what I can tell they use the same CSS code in displaying the header image on the Home Page.

Here is the screenshot of the Home page showing the Image as header

enter image description here

And here is the screenshot of the a Page (About Us) which uses the same Image (the brown texture with green part) as header only seemed zoomed-in.

enter image description here

I tried digging into the code and I believe this is the part in the Styles.css that deals with it.

CSS

.header-wrapper {
background: #333;
background-image: url(img/wood-only.png);
background-attachment: fixed;
background-size: cover;
min-height: 200px;

So I edited the code above, unfortunately it also affects the Image in the Home page I tried setting the background-size into

background-size: auto;

Ideally I can work with editing the template files but I am not familiar with WordPress' structure, and now I am not sure how to procede.

share|improve this question

2 Answers 2

The body tag has quite a few classes eg "home page page-id-### page-template page-template-template-name" you could make use of to customize the header with css. Just specify a different target:

.home .header-wrapper {
   background-image: url(img/some-other-image.png);
}
share|improve this answer
    
It's important to note that the theme has to use the function body_class() –  brasofilo Sep 26 '13 at 16:01
    
@MikeNGarrett Thank you for giving me an insight on how to solve this. What I did was make use of JetPack's Custom CSS, added the CSS code there. –  lozadaOmr Sep 27 '13 at 3:59
up vote 1 down vote accepted

I managed to solve this without relying too much on creating new templates, by using JetPack plugin.

And took advantage of it's ability to add Custom CSS

This is the CSS line I added

body.page .header-wrapper {
    background: #333;
    background-image: url(http://image-url/image.png);
    background-attachment: fixed;
    background-size: auto !important;
    min-height: 200px;
}
share|improve this answer

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.