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.
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.
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;
}
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
Try:
background-image: url("caminho da imagem");
background-repeat: no-repeat;
background-size: cover;