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

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

Email text will be truncated with an ellipsis on two lines

Are there alternative methods to truncate text without relying on webkit-line-clamp? I need to implement this in an email, so using it is not an option. This is the current code snippet I am working with: <style> h2 { line-height:1.5rem; m ...

htmlcssemailtemplateswebkit

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

When you hover over the image, the text will disappear

When I hover over the image of LTC, a thumbnail appears with text and a button. However, I do not want the text "LTC" to be shown when hovering over the image. <div class="col-md-4"> <div class="view view-eighth"> <div class=" ...

htmlcss

Achieve a sliding effect between two divs using CSS only

I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially. My goal is to achieve an effect where when you hover over the first div, the second one slides upward and ...

htmlcssanimation

Rewriting Queries Using URL Parameters

I'm having trouble with query rewriting not functioning as intended. I want requests going to wpsite.com/foo/bar/2/ to be rewritten as wpsite.com/foo/bar/?my_id=2. functions.php // Custom URL parameters addition function add_custom_query_var( $vars ...

phpwordpress

"Customize the font style of columns in a WordPress table created with TablePress by setting them to it

Recently, I designed a table in a WordPress blog using the TablePress plugin. My intention now is to style the left column's font in italics, excluding the table header. ...

csswordpress

Is there a way to align the line under the hyperlinks to match the text size using CSS?

<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...

htmlcssnext.js

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

javascriptjquerycss

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

Issues with the alignment of columns using Bootstrap framework

I've created a design in Photoshop using the Bootstrap 12-column guide, but when I try to implement it using Bootstrap, the results are completely off. https://i.stack.imgur.com/vQwOt.png Here's my HTML code: <!DOCTYPE html> <html lan ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

htmlcssangularbootstrap-4

Modify the text of a button when hovered over (JavaFX)

Can anyone help me figure out how to change the text of a button when it is hovered over? Approach: if (button.isHover()){ button.setText("new message"); } I'm open to either a css fix or a code solution! ...

javacssjavafx

"Tagging multiple content snippets within a label element to create a truncated text

How can I truncate a specific inner span of a label, containing multiple span elements, to prevent overflow into the next line? To address this issue, I have created a JSFiddle available at https://jsfiddle.net/keltik/k18892xe/3/. Here is a snippet of the ...

htmlcsssassspectre.css

Stacking divs one on top of the other

My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screensho ...

htmlcss

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Variety of background colors for different categories

Is there a way to showcase my categories with different background colors using a custom post type? I want to link the slug name from my taxonomy to serve as the class attribute for a span element and style it with CSS. However, I am encountering issues wi ...

phphtmlcsscategoriestaxonomy

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite