Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Background en CSS Fondo - Virtualnauta.com - Tutorial CSS

CSS Background - Fondo

Decora el fondo de pantalla de tu sitio con colores o imágenes.


El fondo con CSS

Las propiedades de fondo(en inglés background) en CSS, nos permiten controlar el color de fondo de un elemento.

Colocar una imagen de fondo, la ubicación de la misma en la pantalla (centrada, a la izquierda, en alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetirá.

En términos del modelo de cajas la propiedad background afecta tanto al fondo del elemento, al relleno del mismo (padding) y a los bordes (border).
Las propiedades de background se aplican a todos los elementos


La propiedad de los fondos o backgrounds

La propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez.

Sintaxis

Establecer diferentes características del fondo a la ves.

<head>
<style="type:text/css">
selector {background: valor 1 valor 2}
</style>
</head>

Nota: debemos dejar un espacio en blanco entre los valores

Los posibles valores para definir los fondos

color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat | fixed | % | longitud | left | center | right | top | bottom

Ejemplo

Vamos a aplicar un fondo rojo al elemento h2 de esta página.

Código
<head>
<style type="text/css">
h2{background:red}
</style>
</head>

<body>
<h2>El fondo del título es rojo.</h2>
</body>
Resultado

El fondo del título es rojo.


Aplicar color al fondo

La propiedad background-color especifica el color de fondo del elemento.

Sintaxis

Establecer el color de fondo.

<head>
<style="type:text/css">
etiqueta HTML {background-color: valor}
</style>
</head>

Los posibles valores para definir los colores del fondo

color | transparent

Ejemplo

Vamos a aplicar un color de fondo a la página.

Código
<head>
<style type="text/css">
body{background-color:orange}
</style>
</head>

<body>
<p>El fondo de la página es naranja.</p>
</body>
Resultado

El fondo de la página es naranja.


Decorar el fondo con una imagen

La propiedad background-image inserta una imagen como fondo del elemento.

Sintaxis

Insertar una imagen de fondo.

<head>
<style="type:text/css">
etiqueta HTML {background-image: url("nombre-de-la-imagen")}
</style>
</head>

Los posibles valores para la inserción de imágenes de fondo

url | none

Ejemplo

Vamos a usar una imagen de fondo en nuestra página.

Código
<head>
<style type="text/css">
body{background-image:url("fondo3.jpg")}
</style>
</head>

<body>
<p>Ejemplo de una imagen de fondo</p>
</body>
Resultado

Ejemplo de una imagen de fondo


Imagen más pequeña que el tamaño del fondo

Si la imagen que elegimos de fondo es más pequeña que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedad background-repeat.

Sintaxis

Repetir una imagen de fondo.

<head>
<style="type:text/css">
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-repeat: valor;
}
</style>
</head>

Los posibles valores para la repetición de una imagen en el fondo

repeat | repeat-x | repeat-y | no-repeat

Ejemplo

Vamos a usar esta imagen Fondo 4 de fondo en nuestro ejemplo.

Código
<head>
<style type="text/css">
body {
background-image:url("images/fondo.png");
background-repeat:repeat;
}
</style>
</head>

<body>
<h4>Repetición de una imagen de fondo</h4>
</body>
Resultado

Repetición de una imagen de fondo


Imagen de fondo estática o dinámica

La propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es decir que al movernos por la página con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se desplaze con la misma.

Sintaxis

Imagen de fondo estática o dinámica.

<head>
<style="type:text/css">
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-attachment: valor;
}
</style>
</head>

Los posibles valores para esta propiedad

fixed | scroll

Elije el lugar exacto para ubicar la imagen de fondo

La propiedad background-position nos permite ubicar una imagen en un lugar específico dentro del fondo.

Sintaxis

<head>
<style="type:text/css">
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-position: valor;
}
</style>
</head>

Los posibles valores para la ubicación exacta de la imagen en el fondo

% | coordinadas x-y | left | center | right | top | bottom

Ejemplo

Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.

Código
<head>
<style type="text/css">
body {
background-image: url("images/fondo.jpg");
background-repeat: no-repeat;
background-position: 60px 100px;
}
</style>
</head>

<body>
<p>Imagen en las coordenadas x=60px y=100px</p>
</body>
Resultado

Imagen en las coordenadas x=60px y=100px


Propiedades del fondo

PropiedadDescripciónValoresDetallesEj.
background Propiedades individuales relacionadas con el fondo. background-color Color de fondo Ejemplo con todas las propiedades del fondo
background-image Imagen de fondo
background-repeat Repetición del fondo
background-attachment Acoplamiento del fondo
background-position Posición del fondo
background-color Color de fondo. color Color Ejemplo de como definir el color de fondo
transparent Transparente Ejemplo de como definir el color de fondo transparente
background-image Imagen de fondo. URL Dirección URL Ejemplo de como definir una imagen de fondo
none Nada Ejemplo de como definir un fondo sin imagen
background-repeat Repetición de la imagen de fondo. repeat Repite Ejemplo de una imagen que se repite hasta cubrir todo el fondo
repeat-x Repite horizontalmente Ejemplo de una imagen que se repite sobre el eje X
repeat-y Repite verticalmente Ejemplo de una imagen que se repite sobre el eje Y
no-repeat No se repite Ejemplo de una imagen de fondo que no se repite
background-attachment Desplazamiento de la imagen de fondo. scroll Desplaza Ejemplo de una imagen de fondo que se desplaza con el desplazamiento de la página
fixed Fija Ejemplo de una imagen de fondo fija que no permite ser desplazada
background-position Posición de la imagen de fondo. % Porcentaje Ejemplo de como ubicar la imagen de fondo con porcentajes
longitud Longitud Ejemplo de como ubicar la imagen de fondo con pixels
left Izquierda Ejemplo de como ubicar la imagen de fondo a la izquierda
center Centro Ejemplo de como ubicar la imagen de fondo en el centro
right Derecha Ejemplo de como ubicar la imagen de fondo a la derecha
top Superior Ejemplo de como ubicar la imagen de fondo arriba
bottom Inferior Ejemplo de como ubicar la imagen de fondo abajo


<<< Uso de los Estilos Textos - Text en CSS >>>

En la Web