CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
kakuki
kakuki

Reputation: 587

Bootstrap responsive background image

How do I make, using bootstrap, a div holder having as background an image to fit to visitors display? The image has a fixed height and width. If the screen is smaller should be resized to do not have x,y overflow.

Upvotes: 23

Views: 109414

Answers (4)

Pranav Pandey
Pranav Pandey

Reputation: 53

First, for the background image:

div.someclass{ 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.

Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:

div.someclass{
 margin-top:5%;
}

change the above 5% according to your requirement.

Upvotes: 4

user4773260
user4773260

Reputation:

This worked for me:

body{
        background-image: url('../url') ;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height:100%;

    }

Upvotes: 0

kdani
kdani

Reputation: 847

I'm not very experienced in Bootstrap, but I think there is no such feature. I recommend you the create your own "Bootstrap Theme", a pure CSS or LESS file to customize your background.

You could simply use:

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png);
    background-size: cover;
}

This code stretches your background image in both dimensions, but it cuts some parts of the image, unless the screen ration is the same as the image ratio.

body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
    background-size: cover;
}

Upvotes: 1

pzin
pzin

Reputation: 4248

You could use background-size like this:

div.someclass {
  background-size: cover;
}

There's a good article from @Chris Coyier showing a few techniques: http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 30

Related Questions