CODEWITHSUNDEEP
htmlcssimagebackground
shyama
shyama

Reputation: 331

Full background Image size in browser in any resolution

I am trying to create a full background website. Now i am working with 1920*1080 resolution screen. But i have to fit the background in any resolution. I use the following css

html {
    background:#65b5cc url(webbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
   -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
    }

But this is not re-size the background when browser re-size, and one more doubt is i use the background as jpg image size is 1627*768 . is that the right size. I want to show vector type drawings as my background, so want to get maximum quality in less size. Guide me.

Thanks

Upvotes: 0

Views: 914

Answers (2)

Oriol
Oriol

Reputation: 12710

Try this:

html, body {
    background: url(http://placeskull.com/100/100/) no-repeat center center fixed #65b5cc;
    // Make sure your SVG image expands to the whole window/page.
    background-size: 100% 100%;
}

If you use an SVG image, its actual dimensions doesn't matter since it's a vector file, so it can scale to any size without loosing quality.

See Example

Upvotes: 0

user3074446
user3074446

Reputation: 124

Use this property "background-size:100%"

Upvotes: 1

Related Questions