La definición y el posicionamiento de su imagen de cabecera con css en wordpress veinte quince
La mayoría de los temas tienen una imagen de encabezado que aparece en la parte superior de la página. En WordPress, esta imagen es generada por un gráfico definido ya sea en el valor CSS para la propiedad que representa el área de encabezado o mediante el uso de una característica encabezado personalizado en WordPress.
La definición de una imagen de fondo para utilizar como cabecera
En el tema Twenty Quince por defecto de WordPress, una imagen de cabecera personalizada en un sitio que utiliza el tema Twenty Quince incluyendo es bastante maldito fácil. Todo el trabajo duro se ha hecho para usted.
En temas que no tienen la característica de imagen de cabecera personalizada, puede definir fácilmente una imagen de fondo de la imagen de cabecera usando CSS para. Para los fines de este ejemplo, el código HTML para la cabecera de la plantilla es
En el CSS (style.cssarchivo), puede utilizar una imagen de fondo mediante la definición en las propiedades CSS para #encabezamiento. Utilizar este código:
Video: Curso CSS Avanzado desde 0. Posicionamiento CSS Parte I. Vídeo 31
#header {background: url (/images/header-image.jpg) no-repeat-width: 980px; altura: 100px;}El valor de fondo indica una cabecera-imagen.jpg imagen. Para que la imagen aparezca en su sitio, es necesario crear la imagen y subirla a su servidor web en el / images / directorio.
Video: tutorial html y css | posicionamiento de divs en una web (header, body y footer)
Cuando se trabaja con los gráficos en la web, se debe utilizar formatos de imagen GIF, JPG o PNG. Para las imágenes con un pequeño número de colores (tales como gráficos, líneas, logotipos, etc.), el formato GIF funciona mejor. Para otros tipos de imágenes (capturas de pantalla con texto e imágenes, la transparencia mezclado, etc.), utilizar JPG o PNG.
Posicionamiento, repitiendo, o desplazándose la imagen de fondo
Después de cargar un gráfico para utilizar en su tema, puede utilizar las propiedades CSS fondo para posicionarlo. Las principales propiedades de CSS - background-position, background-repeat, y background-attachment - ayuda a lograr el efecto deseado. Echa un vistazo a las propiedades de fondo CSS y sus valores disponibles para el cambio en la hoja de estilos tema.
| Propiedad | Descripción | Valores | Ejemplo |
|---|---|---|---|
| background-position | Determina el punto de partida de su imagen de fondo de en su página web | parte inferior centralabajo a la derechaizquierdo y centralderecho y centralcentro | background-position: centro-inferior |
| background-repeat | Determina si la imagen de fondo se repita, o azulejo | repetir (Repite infinitamente) repetir-y (Repite verticalmente) repetir-x (Repite horizontalmente) no-repeat (No se repite) | background-repeat: repeat-y- |
| background-attachment | Determina si la imagen de fondo se fija o se desplaza con la ventana del navegador | Fixedvoluta | background-attachment: scroll- |
Usted puede explorar el posicionamiento de la cabecera gráfica con algunos de los valores indicados anteriormente. Si usted es una persona visual, disfrutará de valores de pruebas y ajustes para ver los efectos en su sitio.
Video: tutorial html 5 y css 3 | centrar y limitar un banner (imagen)
Digamos que su objetivo es azulejo, o repetir, la imagen de fondo horizontalmente, oa través de la pantalla del navegador de izquierda a derecha de forma que se escala con el ancho del navegador en cualquier ordenador. También desea cambiar el color de fondo a un color diferente (como el blanco, como en el siguiente ejemplo). Para lograr esto, abra la hoja de estilo de nuevo y cambiar:
background: # f1f1f1-
a
Video: Cambiar el Tamaño de la cabecera en la plantilla Genesis
background: # FFFFFF-Imagen de fondo: url (images / cabecera-imagen.jpg) -Antecedentes-repeat: repeat-x
o puede utilizar
background: url #FFFFFF (imágenes / cabecera-imagen.jpg) repeat-x