Change a Page's Header Image in WordPress [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
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
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.
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.

Answer 1

In WordPress, the header is defined by default in "header.php". You need ftp access, and copy header.php, rename it header2.php, make your changes, save. Then copy whatever your main page template is, and replace the with and save that as a different file, such as main2. Make sure to change the name in the commented area at the top so WordPress will show a distinct name for that template. Upload your new pages to your theme directory. On the pages which you want to have the changed header, select your new page template and save.
Walk in the park.

Answer 2

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;
}