Bootstrap Background image issue.

abhinavsmoudgil

I am new to Bootstrap.

I just implemented bootstrap on a page. I set the background image of div.

And then witin that div Ihave placed few controls like textbox and button . now when I change the resolution of the sreen or of the browser the text boxes and the buttons get resized as expected with the bootstrap. But the background image is not getting resized.

If I place the image out of the div in an image control and the change the resolution then the image gets resized as expected by bootstrap.

Please help me with this.

Thanks

hgtonight

Welcome to the community!

Are you talking about the Bootstrap theme?

Or Bootstrap in general?

What version of Vanilla are you running?

abhinavsmoudgil

bootstrap in general..

Tama

.whateverthediviscalled {
 background: url("pathtoimage/image.png") repeat;

/* or if you want no repeat just stretch 
background:  url("pathtoimage/image.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This can go in tags on the actual page, or in a custom.css ( or style.css etc.) file that is used by the page.

http://css-tricks.com/perfect-full-page-background-image/ Might help

vrijvlinder

you can also use

html, body {
    background: url("image url")no-repeat scroll 0 0 / 100% 100% transparent !important;
    height: 100%;
    margin: 0;
    padding: 0;
}