CODEWITHSUNDEEP
htmlcss
boandriy
boandriy

Reputation: 537

How to make a background image full size

I am trying to make a background image full size: that doesnt mean that it should cover all page, what I mean is that the image width should be full window size and the height should be auto(the image should rescale and be scrollable if needed). This is what i have tried:

body{
    width: 100%;
    height: 100%;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

but it just covers the full window and cuts of the lower part of the image, I have also tried this:

body{
    width: 100%;
    height: auto;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

but then the background disappears if body is empty. As I am new to HTML and css, I would really appreciate some help.

Thanks in advance!

Upvotes: 2

Views: 408

Answers (3)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

You need to set height 100% to .body class to cover the full page. and remove center center fixed properties.

  body{
        width: 100%;
        height: 100%;
        background: url("../Images/BG_main.png")no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Upvotes: 0

abhisek
abhisek

Reputation: 952

Try this (along with your css):

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Upvotes: 0

Mr. Hugo
Mr. Hugo

Reputation: 12600

You should set the HTML to a height of 100% too, like this:

body, html {height: 100%;}
body {
  background: red url("https://i.sstatic.net/jGlzr.png") no-repeat center center fixed;
  background-size: cover;
}

Too see what goes wrong, right-click and select 'inspect element'. Then try to find the HTML and the BODY element. Look for their heights and see if they equal the window height.

https://jsfiddle.net/n6ef81qj/

Upvotes: 3

Related Questions