Las propiedades del fondo de las hojas de estilo en cascada (css)
Con las hojas de estilo en cascada (CSS), se puede aplicar propiedades de fondo a un número de diferentes objetos en una página web, incluyendo toda la página, una capa determinada, una mesa, una celda de la tabla, e incluso texto.
Video: curso css hojas de estilo - parte 4 propiedad Background
color de fondo: Un color de fondo se puede aplicar a la mayoría de los objetos de una página, incluyendo texto, tablas, celdas de tablas, capas, y el cuerpo de una página utilizando un valor hexadecimal. Al especificar el color hexadecimal para cualquier estilo, recuerde agregar el símbolo de número (#) Antes de que el valor hexadecimal, como en # cc9900, para obtener los mejores resultados de visualización del navegador.
p {background-color: # 33ff00-}imagen de fondo: Se puede aplicar imágenes, tales como color de fondo, el fondo de muchos objetos diferentes en una página web, incluyendo el cuerpo de una página, tablas, celdas de tabla, y las capas. Puede controlar cómo los cuadros de imagen (repeticiones) mediante el uso de la repetir atributo.
.mylayer {Imagen de fondo: url (images / car.jpg) -}background-repeat: Los repetir atributo indica al navegador cómo la imagen de fondo se debe repetir en la zona que está llenando. Por defecto, y salvo que se especifique lo contrario, todos los orígenes se mosaico vertical y horizontalmente para llenar todo el espacio de fondo de la etiqueta o un objeto de estilo.
body {background-image: url (images / zigzag.jpg) -Antecedentes-repeat: repeat-x}los repetir atributo tiene cuatro variables:
repetir: Esta opción es la misma que la configuración predeterminada para las imágenes de fondo y la imagen de fondo azulejos tanto horizontal como verticalmente.
repetir-x: Utilice esta opción cuando desee que la imagen de fondo a solo fondo a lo largo del eje horizontal. Si se desea, usarlo en conjunto con la horizontal y / o vertical background-position atributo.
repetir-y: Utilice esta opción cuando desee que la imagen de fondo a solo fondo a lo largo del eje vertical. Si se desea, usarlo en conjunto con la horizontal y / o vertical background-position atributo.
no-repeat: Este ajuste muestra la imagen de fondo como una sola imagen estática sin repetir en cualquier dirección.
background-attachment: Este atributo se refiere a cómo la imagen de fondo interactúa con el contenido por encima de ella. La imagen de fondo puede comportarse de tres maneras diferentes - voluta, fijo, y heredar - pero no los tres son apoyados constantemente por todos los navegadores, así que asegúrese de probar la opción que selecciona en una variedad de navegadores y versiones de navegadores en ambas plataformas Mac y PC.
body {background-image: url (images / biodiesel.jpg) -Antecedentes-adjunto: background-repeat-fijo: repeat-y-}He aquí una explicación de los diferentes estilos de fondo de fijación:
voluta: Esta es la opción por defecto de forma en la imagen de fondo se une a la página, que funciona de la misma si se especifica el atributo o no especificado en el CSS. Con esta opción, los rollos de imagen de fondo, junto con cualquier texto y otros objetos en la página.
Video: Curso Basico de CSS - 6. Fondos
fijo: Los fijo atributo mantiene la imagen de fondo fija a la ventana del navegador, mientras que el texto y otros objetos de la página avanzar al siguiente elemento.
heredar: Cuando se especifica esta opción, la imagen de fondo hereda la norma de conexión, ya sea voluta o fijo, desde su contenedor principal, al igual que con una celda de tabla dentro de una tabla.
background-position (X): Establecer la horizontal background-position atribuir a controlar dónde en la ventana del navegador las visualizaciones de fondo de imagen y repeticiones. Escoger izquierda, centrar, o derecho o escriba cualquier valor en px (píxeles), ordenador personal (Picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (Ejs), o % (porcentaje).
p {background-image: url (images / recycle.jpg) -Antecedentes-repeat: repeat-x-background-position: left;}background-position (Y): Establecer la vertical, background-position atribuir a controlar dónde en la ventana del navegador las visualizaciones de fondo de imagen y repeticiones. Escoger parte superior, centrar, o fondo o escriba cualquier valor en px (píxeles), ordenador personal (Picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (Ejs), o % (porcentaje).
p {background-image: url (images / gogreen.jpg) -Antecedentes-repeat: repeat-background-position-Y: centro-}Cuando tanto las posiciones de fondo horizontal y vertical deben especificarse en el CSS, enumerarlos juntos separados por un espacio:
p {background-image: url (images / earthsafe.jpg) -Antecedentes-repeat: repeat-x-background-position: centro-izquierda}La posición horizontal siempre va delante de la posición vertical cuando los dos se combinan. Si esta orden no es seguido, el elemento no se muestren correctamente, lo que resulta en problemas de visualización inesperados cuando se ve en diferentes navegadores.