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

CSS Resizing background image height

CSS Resizing background image height

Problem

I am making a website where the Background is resizing when the window is resized. When i change te width of the window it just works fine. But when i resize the Height of the window it doesnt resize. Here is what i mean:

Here is my CSS code:

body{
font-family: Georgia;
margin: 0 0 0 0;
margin-top: -16px;
padding: 0;
background-image:url('back.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}

I have tried doing background-size: 100%;, but that didnt really help.

Problem courtesy of: f.lorenzo

Solution

I would recommend using the html property instead of body because its always at minimum the size of the browser height.

The below code should help you achieve the 100% width 100% height background (even on resize). Depending on your project, I would recommending adding the vendor prefixes for maximum compatibility.

     html{
        background:url('back.jpg') no-repeat center center fixed;
        background-size: cover;

     }
Solution courtesy of: BJack

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

CSS Resizing background image height

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×