Cómo poner una imagen de fondo (background) con tres imágenes

Cuestiones relacionadas con las plantillas y el diseño en general (CSS, html...). Todas las versiones de Joomla.

Moderators: carcam, AlexVega, hefesto

Post Reply
Winter_Art
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Feb 06, 2020 9:56 am

Cómo poner una imagen de fondo (background) con tres imágenes

Post by Winter_Art » Mon Mar 02, 2020 6:12 am

Quisiera poner una imagen de fondo en tres partes:
Image
la 1 sería el encabezado
la 2 el cuerpo que se repetiría indefinidamente
y que termine con la 3 que sería el pie de página

¿Hay alguna extensión para lograr este efecto?
Gracias.

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2537
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: Cómo poner una imagen de fondo (background) con tres imágenes

Post by AlexVega » Mon Mar 02, 2020 4:09 pm

Que tal,

Una posible solución es insertar la imagen vía CSS directamente en tu plantilla, la propiedad se llama backgrund-image, asignarías la imagen de fondo número 1 a la etiqueta header (si tu plantilla usa HTML5) o al div que contenga tu header y lo mismo para cada sección de tu sitio.

Adjunto enlace con código de ejemplo:
https://developer.mozilla.org/es/docs/W ... ound-image

Saludos!

Winter_Art
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Feb 06, 2020 9:56 am

Re: Cómo poner una imagen de fondo (background) con tres imágenes

Post by Winter_Art » Tue Mar 03, 2020 9:02 pm

AlexVega wrote:
Mon Mar 02, 2020 4:09 pm
Adjunto enlace con código de ejemplo:
https://developer.mozilla.org/es/docs/W ... ound-image

Saludos!
Gracias, esta página me dio algunas ideas. No soy bueno en esto del código css, pero al final quedó así:

Code: Select all

background-image:
    url("..background/ej1.png"),
    url("..background/ej3.png"),
    url("..background/ej2.png");
background-size:
	100%,
	100%,
	100%;
background-position:
    top,
    bottom,
    center;
background-repeat:
    no-repeat,
    no-repeat,
    repeat;
Saludos.


Post Reply

Return to “Plantillas (templates) y diseño”