Genesis sample header cut off at top and bottom

[ceah]

Hi,

I am modifying the Genesis sample theme. I made the header responsive by using this code:

.site-header {
background-image: url(/wp/wp-content/uploads/2014/09/header.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
min-height: 100%;
}

My header has a thin strip of gray at the top and a thin strip of green at the bottom. They are both cut off. I see that when I change the background position to top center, then the top strip will show. And when I change the background position to top bottom, the bottom strip will show. Well how do I get the entire header to show without cutting off the top or bottom?

Also, I changed the media query max-width from 960px to 9960px just so my dynamic text site title will stay centered. Was this the best way to go about this?

Thanks

[ceah]

Well I can see now that as I resize the window, the image starts to stretch and and get bigger and the top and bottom "grow" out of the area. Should I have more that one background header to use for different sizes.

[Brad Dalton]

Try this http://wpsites.net/web-design/add-header-image-logo-to-genesis-2-0-sample-theme/

---

Tutorials for StudioPress Themes.

[ceah]

Oh, you've got the skills Brad! It worked, thanks to your directions. Thanks so much!

[Author]

Posts