Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 - (background-size: auto 100%;) - unexpected behavior

CSS3 - (background-size: auto 100%;) - unexpected behavior

Problem

I currently have the following CSS (called splash.css):

html { 
    background:url(splash.jpg) center no-repeat;
    background-size:auto 100%;
}

And the following HTML:



    
        Test

I'm trying to get the background image called splash.jpg to always have the same height as the browser window, and to resize it (keeping its aspect ratio) and allow some of the width to remain outside the browser window. In addition, the background must be centered about the browser window.

Currently I would expect my CSS to do exactly what it's supposed to do. I've set the background to be horizontally and vertically aligned to the center, and I've set it to the image it's supposed to be. I've also set the background-size to auto 100% - which, according to Mozilla Developer Network, resizes the image exactly like I want it to be resized.

If the background-size has one auto component and one non-auto component: If the image has an intrinsic proportion, then render it using the specified Dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

The problem I am facing is that the height of this huge, 1920x1080 image, appears to be around only 50px when I open the HTML in a browser window. The width also appears to be in the right ratio to the height.

At first, I felt it might be some sort of browser-dependent bug - but the page appears pretty much exactly the same in both Chrome and Firefox!

Note - Any other SIMPLE solutions are welcome. I don't want this behavior to be Javascript dependent - but I don't mind the solution working only in the latest versions of FF/Chrome.

Problem courtesy of: Shariq

Solution

Add height: 100%; to your html styles.

Solution courtesy of: Niet the Dark Absol

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 - (background-size: auto 100%;) - unexpected behavior

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×