Bootstrap responsive background image

Question

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.

Answer 1

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/

Answer 2

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.

Answer 3

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;
}