Imágenes de fondo

<div id="prueba">

</div>

<div id="test">

</div>
<div id="test2">

</div>

<ul>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
</ul>
#prueba{
width:500px;
height:400px;
border: solid 2px grey;
background-image:url("img/smile.png"),url("img/textura.jpg");
background-position:right BOTTOM, left top;
background-repeat:no-repeat;
background-size: auto,cover;
}

#test{
width:500px;
height:200px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}
#test2{
width:200px;
height:500px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
background-position:right bottom;
}
li{
display:inline-block;
width:150px;
height:150px;
border: solid 4px orange;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}

li:nth-child(2){
background-image:url("img/smile.png");
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos