CODEWITHSUNDEEP
htmlimagecss
user3232585
user3232585

Reputation: 45

background image is not fit into full screen. The height is cutting down

  body
        {
        background-image: url('../Media/bg3.jpg') ;
        background-repeat: no-repeat;
        background-size: 100%;

        }

bottom of the image is not fit into the screen. I have added background image in css body tag. Width is perfect.But height is not fit into the screen. I saw many examples.but it is not coming.

Upvotes: 0

Views: 832

Answers (7)

user3232585
user3232585

Reputation: 45

Now it is working.

body
{
    background-image: url('../Media/bg3.jpg') ;
    background-repeat: no-repeat;
    background-size: 100%;
    height:870px;
    background-image: url('../Media/bg3.jpg');
}

footer
{
    position: absolute;
    bottom: 0;
}

Now it fit the full screen.Thank you

Upvotes: 0

Indika Gamage
Indika Gamage

Reputation: 1

remove body tag css class and add html class to do that this is the code 

`html { 
 background: url('../Media/bg3.jpg') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

`

Upvotes: -1

4dgaurav
4dgaurav

Reputation: 11506

Add your background image as

background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */

for divs inside it use this for complete center

width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

You can set following properties,

Check this Demo jsFiddle

CSS

body {
    background: url('../Media/bg3.jpg') no-repeat center center fixed;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

CSS

Check this Demo jsFiddle

    background-image: url('../Media/bg3.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    background-attachment: fixed;

Upvotes: 0

Magesh Kumaar
Magesh Kumaar

Reputation: 1467

These two lines are enough to fix and stretch a background image !

body{   
background:url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat fixed;
background-size:cover;
}

JSFIDDLE : -FIDDLE DEMO HERE

Upvotes: 2

Madhuri
Madhuri

Reputation: 158

U may use following code

body
        {
        background-image: url('../Media/bg3.jpg') ;
        background-repeat: no-repeat;
        background-size: 100%;
        height:100%;
        }

Upvotes: 1

Paweł
Paweł

Reputation: 409

try background-size: cover, it should fit screen

Upvotes: 0

Related Questions