CODEWITHSUNDEEP
cssimagetwitter-bootstrapbackground
Lauren
Lauren

Reputation: 87

Responsive Image Background

I have a picture as my background but I can't figure out how to make my code responsive such that the image stays consistent when I decrease the browser window.Here is my code: 

body {
margin-top: 50px; 
}


.full {
background: url(../melissa.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Upvotes: 0

Views: 84

Answers (3)

jofftiquez
jofftiquez

Reputation: 7708

If you want a responsive background look at this SAMPLE

.full {
    height: 500px;
    background-image: url('image.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Upvotes: 1

syrano
syrano

Reputation: 88

Actually, I'm assuming .full is a div which contains the background you want right? if that's the case, the width and height set to 100% will only make the div that big, which may still not work as he's using 100% to the height and thus you would need to set 100% to the body or any other container that .full is in. You can just set the background-size: cover, background-position:center center, backgorund-repeat:norepeat, and just give .full it's height and width. That should make the backgound always filling the whole container.

Upvotes: 0

AngularJR
AngularJR

Reputation: 2762

This will make it responsive for you. Just add the height and width to 100%.

.full {
position: relative;
width: 100%;
height: 100%;
background: url(../melissa.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Upvotes: 0

Related Questions