Home page picture extend to top of home page

[randit]

Hi:

What CSS code would I use to have the home page image (background image) be displayed to the top of the website thus removing the color currently behind the logo and widget area? Thanks!

---

[Ginger Coolidge]

Hi there,

This is fairly easy to do. Where you make changes depends on two things: which color scheme you are using and your shading on the background image. Before making changes please make sure you have a backup of your style.css and FTP or some sort of access to replace it other than your WordPress Admin Dashboard.

Look in your style.css file for this code around line 938:

Site Header
---------------------------------------------------------------------------------------------------- */
.site-header {
	background-color: #6c6353;
}

And comment the background color out so it looks like this:

/*background-color: #6c6353;*/

If you’re using another color scheme besides the default, you’ll need to comment out that background color as well. For example, on my test site I’m using the Blue/Green colors so I also had to go here and make this change:

.wap-blue .site-header {
	/*background-color: #3d4d6d;
	color: #fff;*/
}

Save your changes and refresh and now you’ll be able to see your background image all the way to the top

Next step is the image filter. If you have the default settings, you’ll notice the area you just exposed is lighter than the home welcome and search bar widget areas. To make them all match, add this entry to the same location you commented out the background colors above.

background-color: rgba(0, 0, 0, 0.4);

It’s kinda fun to play around with this. We have a post for those specific places in the CSS to change the shading in the home welcome and search bar areas that reference the line above.

https://www.winningagent.com/forums/topic/home-page-image-filter/

Show off your changes when you’re done!

Regards,

Ginger

---

[randit]

Hello:

Thanks for the follow up. Here is what I have added to my custom CSS:

.site-header {
/*background-color: #6c6353;*/
}

.wap-orange.site-header {
/*background-color: #fff;
color: #434A54;*/
}

and the background image is not appearing. The website is fivestarrealty.wpengine (dot) com. Could you take a peek?

Thanks!

---

[Ginger Coolidge]

Hi there,

On your site, using Chrome – Inspect Element I commented out the first entry which in your style sheet was on line 953, this is the default theme colors.

On the second part, it doesn’t read that way so I’m thinking you commented out a content area instead. I commented out line 2084, background-color: #fff; and it showed the photo up to the top of the window.

All that’s left is the shading you might want to adjust.

Hope that helps!

---

[Author]

Posts