The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #261464

    I would like the header at this site
    to look like the header at this site

    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.


    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.”

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.