Site header and page header showing color and image

[BowArow2015]

In the Centric theme, I have a image set for home bg and set a color code for page title bg. It still wants to show a part of the image on desktop when scrolling and always a small bit on mobile rendering.

Is there a way to ensure that area only shows the page title bg color on desktop and mobile? Thanks for any help or support, it is appreciated.

http://poolservicesandiego.com/

[nutsandbolts]

Since the background image was added in the customizer, it will override anything in your stylesheet. I'd suggest removing the image in the customizer, then adding it as a background for .home body in your CSS so it only applies to the homepage. You may also want to set the size to cover; on my widescreen monitor there is a lot of blue showing around the picture: https://cloudup.com/cNAwsI1Kc0g

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BowArow2015]

Thanks for that information nutsandbolts,

Would you by chance want to help me with that image styling css (cover full width of screen) and where i put it. This practicing rookie thanks you for your time and knowledge.

[nutsandbolts]

Can you remove the image from the customizer and provide the full image URL here? I'll see if I can get it to cooperate.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BowArow2015]

http://poolservicesandiego.com/wp-content/uploads/2015/10/bg-for-pssd-demo-e1445909665666.jpg

[nutsandbolts]

Okay. Go into your stylesheet and find the heading for a section called Plugins. Above that heading on a line by itself, paste in this:

.home-featured {
	background: url("/wp-content/uploads/2015/10/bg-for-pssd-demo-e1445909665666.jpg") top center no-repeat;
	background-size: cover;
}

Save your stylesheet. Once you do that, the background image should show up on your homepage only. However, on a page like About where there is no text, you may still see it peeking through (it should go away once you add content to the page).

If you add it and something doesn't look right, leave the code in place and let me know - I'll be glad to take another look.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BowArow2015]

Not to sound goofy but your awesome. That seemed to work perfect. Thanks for your time and help. Have a good night.

[nutsandbolts]

No problem! I’ve marked this topic as resolved for now, but feel free to open a new topic if you need help with anything else. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts