Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 272

Visitas el mes pasado: 294

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (III)

5.3 Estilo de fondos

css

Todos los elementos de la página, desde el body hasta la etiqueta más pequeña, tienen un fondo. que por defecto es igual al fondo de la página. (normalmente en transparente) Podemos cambiár el color, o insertar una imagen de fondo mediante algunas propiedades de CSS.


Color de fondo

La propiedad background-color permite cambiar el color de fondo de cualquier elemento al que se le aplique.

La propiedad background-color tiene la siguiente definición:


background-color Color de fondo
Valores <color> | transparent | inherit
Descripción Establece un color de fondo para los elementos
Valor inicial transparent
se aplica a Todos los elementos

Por defecto el fondo de cualquier elemento es transparente (valor transparent), lo que hace que se vea con el mismo fondo que la página. Si queremos cambiar el color de fondo de la página entera aplicaremos la propiedad al elemento body, si queremos que cualquer otro elemento, (párrafos, títulos, enlaces, etc) muestren un color distinto de fondo usaremos la propiedad en ese elemento.

Para aplicar el color podemos usar cualquiera de las formas que tenemos para escribir el valor de los colores en CSS, lo cual lo tenemos explicado en la página 1.4. Colores y medidas .

El color de fondo afecta también al margen interno o padding pero no al margen externo o margin que sigue con el mismo color que el elemento contenedor.

En el siguiente ejemplo se muestra una página en el que los distintos elementos tienen distintos colores de fondo, lo que se consigue con la propiedad background-color.

Ver página ejemplo



Imagen de fondo

También podemos poner de fondo una imagen, para ello usaremos la propiedad background-image la cual tiene la siguiente definición:


background-image Imagen de fondo
Valores <url> | none | inherit
Descripción Establece una imagen como fondo para los elementos
Valor inicial none
se aplica a Todos los elementos

La imagen de fondo viene dada por el valor "url" que lo aplicaremos escribiendo la palabra url seguido de la ruta de la imagen entre comillas y a su vez entre paréntesis url("ruta_de_la_imagen") tal como vemos en el siguiente ejemplo, en el que aplicamos una imagen de fondo a toda la página:

body {background-image: url("objetos/imagen1.jpg"); }

Tal como hemos explicado, para indicar la imagen debemos escribir como valor la palabra clave url seguida un paréntesis, Dentro del paréntesis escribiremos la ruta de la imagen, la cual, aunque no es obligatorio, es conveniente ponerla entre comillas. El nombre de archivo de imagen debe escribirse entero, incluida su extensión (jpg, gif, png, ...)

La imagen por defecto aparece repetida en horizontal y en vertical, a modo de mosaico, a partir de la esquina superior izquierda. El tamaño de la imagen es el que tiene en su archivo original, y no lo podemos modificar desde el código CSS, por lo que si queremos modificar su tamaño debemos hacerlo desde un programa de diseño gráfico o tratamiento de imagen.

El valor none no deja ninguna imagen de fondo, y es el valor por defecto

El siguiente ejemplo muestra una página con una imagen de fondo que tal como hemos dicho se repite en horizontal y en vertical a partir de la esquina superior izquierda, al usar la propiedad background-image.

Ver página ejemplo


En este ejemplo la repetición de la imagen de fondo no queda muy estética, sin embargo este tipo de fondos con una imagen repetida suele utilizarse con imágenes de texturas para crear fondos más uniformes. Veamos el ejemplo anterior con esta otra imagen de fondo:

Textura de madera para fondo

Ver página ejemplo


Aquí ya no da la impresión de ser una imagen repetida, ya que en este tipo de imágenes el solapamiento de una imagen con otra tiene una continuidad.


Prioridades

Podemos establecer simultaneamente un color y una imagen de fondo para un mismo elemento. En este caso la imagen tendrá siempre prioridad sobre el color. con lo cual el color no lo veremos.

Aunque en principio parece inutil establecer un color de fondo y a la vez una imagen, esto no es así, puesto que si por algún motivo la imagen no se llega a ver, o tardara mucho tiempo en cargarse, mientras tanto se vería el color de fondo.

Por este motivo se aconseja también que el color de fondo sea del mismo tono del color de la imagen, para que el texto, en caso de no verse la imagen, tenga un fondo con el contraste suficiente para poder leerse.




En la siguiente página veremos las distintas opciones que tenemos para colocar una imagen de fondo

imagen de fondo



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com