Switch the Header Image on a Page in WordPress

I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want.

Attached below is a screenshot of the homepage displaying the header image:

And here is another screenshot of a different page (About Us) showing the same header image but appears zoomed-in:

After inspecting the code, I found that the Styles.css file is responsible for handling the header image:

CSS

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

I attempted to modify the code above by changing the background-size property to 'auto', however, it also impacted the homepage's header image. Since I'm not familiar with WordPress structure, I'm unsure about how to proceed.

csswordpresswordpress-theming

Answer №1

In WordPress, the default header file is called "header.php". To customize it, you'll need FTP access to copy the header.php file, rename it as header2.php, make your desired changes, and save. Next, duplicate your main page template, replace the include statement with the new header file, and save it as a new file like main2.php. Remember to update the name in the comment section at the top to ensure WordPress recognizes this as a unique template. Finally, upload your updated files to your theme directory and assign the new page template to any pages that should use the modified header.

Taking a leisurely stroll through the park.

Answer №2

By leveraging the JetPack plugin, I was able to solve this issue without resorting to creating new templates.

I utilized its Custom CSS feature to make the necessary adjustments.

Below is the CSS code snippet that I implemented:

body.page .header-wrapper {
    background: #333;
    background-image: url(http://new-image-url/image.jpg);
    background-attachment: fixed;
    background-size: auto !important;
    min-height: 200px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

css

Inconsistency in naming of jQuery CSS properties

Can you explain the reason behind the difference in property names: $(elem).css('padding-top') compared to $(elem).css('marginTop') ? Wouldn't it make more sense if we use: $(elem).css('margin-top') instead? ...

jquerycss

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

Displaying image titles when the source image cannot be located with the help of JavaScript or jQuery

I am currently facing an issue where I need to display the image title when the image is broken or cannot be found in the specified path. At the moment, I only have the options to either hide the image completely or replace it with a default image. $(&apo ...

javascriptjquerycssimage

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

javascriptcssangularhtml

Creating overlapping layouts with absolute positioning in Bootstrap leads to a visually appealing

I'm currently working on a layout that involves absolute positioning elements, similar to the one shown in this example: https://i.sstatic.net/TixbZ.jpg It seems like the elements are overlapping and not clearing properly. I've been looking for ...

htmlcsstwitter-bootstrapbootstrap-4sass

What is the process for adjusting the color of the browser tab?

My chat application is running smoothly, but a client has requested the ability to highlight or make the browser tab blink when they receive a visitor call. This will help them respond promptly to incoming inquiries. Does anyone know how to implement thi ...

jqueryhtmlcss

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

htmlcss

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

cssmenuhover

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

What is the best way to align a form in the center of a page both horizontally and vertically

Currently, this is the HTML code I am working with: <body> <form id="form_login"> <p> <input type="text" id="username" placeholder="username" /> </p> ...

htmlcss

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

htmlcssimageposition

`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way. My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered. Despite setting the width at 25%, I am encountering some issues with alignment. Please check out the code ...

htmlcssflexbox

The presence of text is leading to CSS placement troubles

I operate a website dedicated to comic content and am looking to incorporate text (retrieved from the database field "description") beneath each comic thumbnail. Here are my two inquiries: 1) I'm facing an issue where adding text below a comic caus ...

phpcss

Incorporating hyperlinks within the navigation buttons

I'm working on a design where I have six buttons that need to be displayed on top of a background image. How can I ensure that the text inside the buttons stays contained within them? Here is the current code structure I am using, which involves utili ...

cssalignment

Styling text on top of an image using CSS

I am attempting to overlay text on top of an image using the following code: .gallery-image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; } h2 span { color: white; font: bold 24px/45px Helvetica, Sans-S ...

htmlcss

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

csscss-float

Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the ...

htmlcsscss-animations

Creating a Dynamic System for Converting Numeric Digits to Alphabetical Grades

Utilizing the code provided below, you can calculate a user's grade point average ranging from A+ to E-. Is there a way, within the following fiddle, to not only display the GPA but also convert it into a corresponding letter grade from A+ to E-? Curr ...

javascriptjqueryhtmlcssdynamic

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

jquerycssjquery-ui