Cómo definir y posicionar una imagen de cabecera de wordpress con css
Video: Como Poner y Configurar SLIDESHOWS (de banners) en tu página web | Wordpress
La mayoría de los temas de WordPress tienen una imagen de encabezado que aparece en la parte superior de la página. 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.
¿Cómo definir una imagen de fondo para su uso como una cabecera
En el Trece tema de WordPress por defecto Veinte, una imagen de cabecera personalizada en un sitio que utiliza el tema Veinte Trece 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: tutorial html y css | efecto scroll con imagen de fondo
#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.
Cuando se trabaja con los gráficos en la web, que es una buena idea 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.
Cómo posicionar, repetir, o recorra 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.
| 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 central, abajo a la derecha, centro izquierda, centro derecha, centro centrar | background-position: centro-inferior |
| background-repeat | Determina si la imagen de fondo se repita, o azulejo | repetición (repite infinitamente), repetir-y (repite verticalmente), repetir-x (repite horizontalmente), no-repetición (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 | espiral fija | background-attachment: scroll- |
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
background: # FFFFFF-Imagen de fondo: url (images / cabecera-imagen.jpg) -Antecedentes-repeat: repeat-x
o puede utilizar
Video: Cómo Hacer un Blog: Cambiar la Imagen del Header en WordPress
background: url #FFFFFF (imágenes / cabecera-imagen.jpg) repeat-x