Header image not displaying full width across all browsers

[klaw718]

my site: http://www.thepeacetribe.com.

If you go to safari, mozilla and chrome, my header doesn’t display full-width. It only displays full width in internet explorer. However, it displays full width in all of these on my 15 inch computer. It doesn’t display full width across all browsers on my 17 inch. Yes, I know that sounds stupid and I admit I’m not very good with code. The dimensions of my header are 1349×243, and I have it set at width: 100%. So I just need some direction as to where I might add or get rid of code to fix this issue.

thanks in advance for any help

[Paulie_D]

If you mean this

.site-header {
background: url(http://www.thepeacetribe.com/wp-content/uploads/2014/11/The-peace-tribe-web-banner.png) no-repeat !important;
}

It’s sitting in a style tag in the head of your page and overriding the declaration(s) in your CSS stylesheet.

<style type="text/css">.site-header { background: url(http://www.thepeacetribe.com/wp-content/uploads/2014/11/The-peace-tribe-web-banner.png) no-repeat !important; }</style>

If you remove it (or comment it out) the image scales and centers.

[klaw718]

by the head of my page, do you mean the functions PHP file?

[klaw718]

nevermind, I removed the line from the stylesheet but I still am having the same issue in Chrome. It seems to be fixed for all other browsers though

[Paulie_D]

It’s not in the stylesheet….it’s in the head of the page….and was overriding the stylesheet.

If you make it this

.site-header {
background: url(http://www.thepeacetribe.com/wp-content/uploads/2014/11/The-peace-tribe-web-banner.png) no-repeat center center;
background-size: cover;
}

it works in Chrome

[klaw718]

okay this might be a beginner question but how do you add code to the head of the page, and not the stylesheet?

[Paulie_D]

I would assume that the head is generated by whatever CMS you are using.

Frankly this style tag just shouldn’t be there so I assumed that you added it yourself.

[klaw718]

no, I didn’t. and unfortunately, I can’t get it to work. I have no idea how to remove the style tag since I didn’t add it in the first place. It’s showing up fine in mozilla and safari now, but not in chrome or IE.

[Jimmy]

You have to go into the editor under the appearance tab. Then click on the “header.php” file to view and manage the contents.

[klaw718]

yeah I’m running the genesis framework and using a child theme. There is no header.php file in the theme, but the header info is in the functions.php file.

here’s the code that calls for the header:

//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘header_image’ => ”,
‘header-selector’ => ‘.site-header’,
‘header-text’ => false,
‘height’ => 234,
‘width’ => 1349,
) );

is there something wrong with that that you can see? apparently there’s style tags associated with the header and I just don’t know where to go to fix this. It’s been driving me crazy trying to figure it out. been working with the code all night but still looking for an answer

[Author]

Posts