Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Ejercicio background centrado
body{
background:url(back.jpg) green no-repeat center top
}
Descarga la imagen superior para hacer el ejercicio
background-size
<style type="text/css">
div{
width:500px;
height:500px;
background:url(mundo.svg), url(tijeras.svg);
background-size:100% 100%, auto auto;
}
</style>
<div></div>
background con rgba
<style type="text/css">
body{
background:url(mundo.svg)
}
div{
width:500px; height:500px; background-color:rgba(0, 0, 255, 0.7);
}
</style>
<body>
<div>texto del div</div>
</body>Gradientes
<style type="text/css">
html{
height:100%;
background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
}
</style>Ejercicios background
1. Degradado repeat
Poner la siguiente imagen como imagen de fondo del body, y hacer que se repita verticalmente.
2. Background múltiple.
Hacer una capa con dos imágenes de fondo. Una alineada a la izquierda y otra a la derecha.
3. Degradado múltiple 2.
Hacer un div: