[Solved] Masthead header background image full width responsive?

[Crssp]

Can anybody help me out here:
i’ve narrowed my CSS down to this so far:

/– Scenic Header background –/
#masthead .inner-wrap div {
background: url(‘/wp-content/uploads/2014/08/header-hills-bg-1200.gif’);
background-repeat:no-repeat;
background-position: top center;
background-size: 100% 100%;
margin: 0;
padding: 0;
}

I can’t seem to get rid of the margin’s on the right and left, tried a few things, still no background love.
link: http://173.254.76.115/~stateler/
thanks for suggestions.

[Paulie_D]

That image is not linked in the CSS that I can see…nor can I see it in the linked sites resources.

Also #masthead .inner-wrap div is very generic…there any many divs that will match that selector.

[Crssp]

@Paulie_D sorry was tinkering, check it now.. thanks.

[Paulie_D]

The div in question is inside a div which is affected by this

.narrow-978 .inner-wrap {
max-width: 978px;
}

You main container is wider than that.

Why not make that image a background of the header itself?

[Crssp]

I couldn’t quite decipher the code to get it on the header itself.
The Css syntax for that was escaping me :(
Could not get it to appear at all, was doing something wrong, hence, when you saw it without probably.

[Crssp]

@Paulie_D it was the syntax of placing header before #masthead.
I had been trying:
#masthead header { as a handle, instead of the correct:
header#masthead

thanks for the suggestion.
In my travels on troubleshooting this one, I found new to me properties for background-size.
Cover and contain… more reading:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
Think I’m good for now then, leaving this on the back-burner probably till Monday. :)
#3dayWeekend

[Crssp]

Now the next css to pull from the bag of tricks here:

https://css-tricks.com/snippets/css/css-text-shadow/

:)

[Author]

Posts