Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
El siguiente código:
body{
background:url(back.jpg) green no-repeat center top
}Es una forma abreviada de este código:
body{
background-image:url(back.jpg);
background-color: green;
background-repeat: no-repeat;
background-position: center top;
}Ejercicio background centrado
Materializar el código anterior en un documento HTML.
Descarga la imagen inferior para hacer el ejercicio
background-size
<style>
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>
body{
background:url(./mundo.svg)
}
div{
width:500px;
height:500px;
background-color:rgba(0, 0, 255, 0.7);
/* background-color: background-color: #0000ff80; */
}
</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
2. Background múltiple.
Hacer una capa con las siguientes dos imágenes de fondo. Una alineada a la izquierda y otra a la derecha.
3. Degradado múltiple 2.
Hacer un div:
- De 400x400px.
- Con tres imágenes de fondo de unas tijeras, unos mundos y un gradiente.
- La imagen de la tijera estará, en pequeñito en la esquina inferior derecha y no debe repetirse.
- La imagen de los mundos ocupará un cuarto de la pantalla.
- La imágen que se verá más al fondo será un degradado circular.