Search code examples
htmlcssbackgroundscale

Background image in div getting cut off at top and bottom when page is too short

I'm super new at CSS, so this may be really simple. I've searched a bunch for the answer to this question, but I haven't found it yet. I would like the div, containing the logo to stretch and scale depending on the page size, and I pretty much have that working, but if the page is too short, the top and bottom of the background image get cut off. Here's the site so you can see what's happening.

chaptertwollc.com

And here's the relevent CSS. 

.centerLogo {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    visibility: visible;
    background-repeat: no-repeat;
    background-image: url(../POP%20high%20res%20logo%20ellipse%20black%20glow%20webop.png);
    background-size: 100%;
    background-position: center center;
    background-attachment: scroll;
}

EDIT: I got it working. It was as simple as changing

background-size: 100%;

to

background-size: contain;
Solution

  • Cross browser solution is this Svoka used the wrong CSS value...

    -webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

    Contain tells the rendering engine to ensure that the background fits in the container without changing aspect ratio.