I have a div that I put a background image the problem is that it is not centered as I want it, how could I center it? here is my code
<div id="main"></div>
#main{
width:500px;
height:500px;
margin:0 auto;
background-image: url("img/wall_color.png");
}
As simple as putting a centered position example:
.main{
width:500px;
height:500px;
margin:0 auto;
background-size: cover;
background-color:grey;
background-image: url("img/wall_color.png");
background-position: 50% 50%;//aqui ocupara el 50 por ciento a ambos lados
}
Add the following to your id main
#main{
background-position: 50%;
background-size: cover;
display: table;
height: 100%;
width: 100%;
}
If the height is not adequate, try placing one to your liking.
You can add an id to recognize your container in css, and then
#main
{
background-size: 100% 100%; /*Con esto ocupas el 100% del contenedor*/
background-repeat: no-repeat; /*Evitas que la imagen se repita si el contenedor es mas grande*/
background-image:url("img/wall_color.png"); /*Ten en cuenta que la ruta es relativa y empezara desde el lugar donde tengas el css*/
}
With this you can now add the background to any container.