.png isn't filling box, please help me understand why

[bmcminn]

I would like the header at this site
https://www.mokudd.com
to look like the header at this site
http://jsbmac.com

The first site is a wordpress site using the Genesis theme, but I have poked at the style.css file quite a bit already. The second is a site I built from scratch. You can see the .png fills the box, right out to all four borders. The second also seems more responsive on multiple screens.

And also, are there any good resources for understanding why/how to fix this.

Thanks, I know this is probably more simple than most topics on this site.

[rkieru]

As to the why this is happening; there are a couple of things.

(1) The site you reference as how it SHOULD look is just loading an image via the IMG tag. Nothing fancy going on; the image loads and is the width / height that it is. Your new site is loading a background into a container that has CSS applied to it. Very different beasts.

(2) The CSS you’re using has background-size: contain !important which is the likely culprit. What this translates to is “Fit the background into this container; make sure we see 100% of the background so downsize/upsize as needed.”

From what you’re describing – what you want is background-size: cover which is more “Fill this entire container with the background image regardless if by doing so some of the image is hidden.”

[Author]

Posts