Estilo CSS background para las imágenes de fondo

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

29.  
30.  
33.  
36.  
51.  

Ejercicio background centrado

body{
	background:url(back.jpg) green no-repeat center top
}
Estilo CSS background para las imágenes de fondo 1

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>

http://www.colorzilla.com/gradient-editor/

Ejercicios background

1. Degradado repeat

Poner la siguiente imagen como imagen de fondo del body, y hacer que se repita verticalmente.

Estilo CSS background para las imágenes de fondo 4

2. Background múltiple.

Hacer una capa con dos imágenes de fondo. Una alineada a la izquierda y otra a la derecha.

Estilo CSS background para las imágenes de fondo 5
Estilo CSS background para las imágenes de fondo 6

3. Degradado múltiple 2.

Hacer un div:

  • De 400x400px.
  • Con una imagen de fondo de unas mundos, donde cada mundo ocupará 1/4 del div.
  • Debajo de los mundos, habrá una tijera pequeñita.
  • Esta imagen de fondo, no se repetirá y estará en la esquina inferior derecha.
  • Debajo de las tijeras pequeñitas habrá un degradado circular.
Estilo CSS background para las imágenes de fondo 3
Estilo CSS background para las imágenes de fondo 2

← Tips de CSS
Motores de navegación →