How do I put a background in a container in Bootstrap?

1

I'm trying to put a Background in a Container, does anyone know how to put it or some other solution? I did not put it on the Body because the image needs to be Responsive.

    
asked by anonymous 19.01.2015 / 20:50

3 answers

5

You can reference the container class and apply background to it, for example:

.container {
 background: #DDD;
}

In addition to color, you can apply responsive images, as in the example below:

.container{
background-image: url(caminho da imagem);
background-repeat: no-repeat;
background-size: 100%;
}

Pay attention to the order of priority of your CSS. I usually work with the raw bootstrap file and an additional CSS. With this, I keep the bootstrap in the original form and I'm making the changes in another style sheet which I import later than the bootstrap. In short, my header looks something like this:

 <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
 <link rel="stylesheet" href="~/Content/css/Estilo.css">

If you do not have a CSS organization exactly, the !important add-on applied after a property declaration and its value may help. In case, your code might look like this:

.container {
 background: #DDD !important;
}
    
19.01.2015 / 22:37
2

try this:
     .container {        background-image: url (img / your_image.png);        background-repeat: repeat;      }

In case that would be a bg of a uniform tone, if in case an image ex: photography, engraving, landscape no longer serveria. tbm do not forget the! important at the end of the attributes

    
19.01.2015 / 21:23
1

Try:

background-image: url("caminho da imagem"); 
background-repeat: no-repeat;
background-size: cover;
    
06.09.2015 / 20:40