Propiedades CSS - Background

www.CopatoNasca.com
Background
Prof: Jorge Pujadas Conde
Propiedades en CSS

www.CopatoNasca.com
Propiedad BRACKGROUND
• Es una propiedad del lenguaje CSS que se encarga de manipula
el fondo de los objetos: Cajas, textos, tablas, etc.
Propiedad Descripción
background Es compatible desde CSS1.
Propiedad shorthand para manipular el fondo de un objeto.
background-color Es compatible desde CSS1.
Propiedad que establece un color de fondo.
background-image Es compatible desde CSS1.
Propiedad que establece una imagen (o un gradiente) de fondo.
background-repeat Es compatible desde CSS1.
Propiedad que establece el tipo de repetición de la imagen de fondo.
background-position Es compatible desde CSS1.
Propiedad que establece la posición en que comienza la imagen de fondo.
background-attachment Es compatible desde CSS1.
Propiedad que establece el tipo de acoplamiento de la imagen de fondo.
background-size Es compatible desde CSS2.
Propiedad que especifica el ancho y alto que tendrá la imagen de fondo.

www.CopatoNasca.com
Sintaxis: Background-Color
EJEMPLO 1: Utilizando palabra Clave
body{
background-color: red;
}
EJEMPLO 2: Utilizando código Hexadecimal
#caja{
background-color: #cccccc;
}
• Es una propiedad del lenguaje CSS que se encarga de
establecer un color de fondo.

www.CopatoNasca.com
Sintaxis: Background-Image
EJEMPLO 1: Utilizando una dirección local
body{
background-image:url(“foto.jpg”);
}
EJEMPLO 2: Utilizando una dirección remota
#paisaje {
background-image: url(“www.pictur.com/foto.png”);
}
• Es una propiedad del lenguaje CSS que se encarga de
establecer una imagen de fondo.

www.CopatoNasca.com
Sintaxis: Background-Repeat
EJEMPLO 1: Utilizando repetición en la coordenada X
body{
background-image:url(“foto.jpg”);
background-repeat:repeat-x;
}
• Es una propiedad del lenguaje CSS que establece el
tipo de repetición de la imagen de fondo.
EJEMPLO 2: Utilizando repetición en la coordenada Y
#fotografia{
background-image:url(“paisaje.png”);
background-repeat:repeat-y;
}

www.CopatoNasca.com
Sintaxis: Background-Position
body{
background-image: url(“foto.jpg”);
background-repeat: repeat-x;
background-position: top right;
}
• Es una propiedad del lenguaje CSS que que establece la
posición en que comienza la imagen de fondo.

www.CopatoNasca.com
Sintaxis: Background-Attachment
body{
background-position: center center;
background-attachment: fixed;
}
• Es una propiedad del lenguaje CSS que establece el
tipo de acoplamiento de la imagen de fondo.

www.CopatoNasca.com
Sintaxis: Background-Size
body{
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
• Es una propiedad del lenguaje CSS que especifica el
ancho y alto que tendrá la imagen de fondo.

Propiedades CSS - Background

Más contenido relacionado

La actualidad más candente (20)

Último (11)

Propiedades CSS - Background