Make header full width across all browsers

[curlychick718]

Hey guys,

I'm having some trouble getting my header image to display full-width across all browsers. It works okay in mozilla and safari, but now it's not working in chrome or internet explorer. I've been messing with the code for hours but can't figure it out. Any CSS people out there that want to help me out? I'd really appreciate it!

http://www.thepeacetribe.com

[askdesign]

Hi,
A few things you need to do that will get you started in the right direction:
(1) Your header image can be a JPG, rather than a PNG. The JPG will be a bit smaller. You only need PNGs when the image has transparency.

(2) The header image size often needs to be changed in the functions.php file. This size will become the baseline that the responsive media queries resize from.

(3) Be sure that the header image does NOT repeat. This can be done on the custom header page and/or in the CSS.
In the CSS, you need to change the background to NOT repeat and perhaps adjust the height declarations:

.site-header .wrap {
background: url("http://www.thepeacetribe.com/wp-content/uploads/2014/11/The-peace-tribe-web-banner.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0) !important;
height: auto;
min-height: 174px;
}

(4) Check the media queries padding for the Site header:
.site-header {
padding: 0;
}

Beyond this, you might need to change some margins and paddings. Good luck!

---

Anne S. Katzeff
Designer | Artist | Teacher

[Author]

Posts