En el post de hoy vamos a mostraros como añadir una imagen de fondo en Prestashop 1.7 para aquellos que queréis personalizar un poco más la plantilla por defecto.

Para conseguir cambiar el color de fondo de la plantilla por defecto de PS 1.7 por una imagen de background tenemos que realizar un pequeño cambio en el archivo custom.css que se encuentra en;

themes\classic\assets\css\custom.css

Una vez descargado y abierto este archivo hay que añadir este trozo de código:

#wrapper {
background-image: url(‘https://nombre-de-la-foto.jpg’)!important;
}

o si subimos la imagen a nuestro servidor en la carpeta img:

#wrapper {
  background-image: url(../img/nombre-de-tu-imagen.jpg);
}

Guardamos los cambios y subimos el archivo a la misma ruta de donde lo descargamos. Si el cambio no se visualiza en tu tienda online recuerda limpiar cache y refrescar.

Ya sabemos como insertar una imagen de background en nuestra tienda online pero no podemos quedarnos en este punto, ya que necesitamos insertar algún trozo de código más para obtener un resultado profesional.

Os dejamos el siguiente código para que facilitaros el trabajo (en rojo los datos a cambiar);

#wrapper {

/* Ubicación de la imagen */

background-image: url(‘https://nombre-de-la-foto.jpg’);

/* Para dejar la imagen de fondo centrada, vertical y

horizontalmente */

background-position: center center;

/* Para que la imagen de fondo no se repita */

background-repeat: no-repeat;

/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */

background-attachment: fixed;

/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */

background-size: cover;

/* Se muestra un color de fondo mientras se está cargando la imagen

de fondo o si hay problemas para cargarla */

background-color: #66999;

}

Guardamos los cambios y subimos el archivo a la misma ruta de donde lo descargamos. Si el cambio no se visualiza en tu tienda online recuerda limpiar cache y refrescar.

Imagen de fondo para Dispositivos Móviles

En insertar una imagen de fondo para nuestra tienda online nos podemos encontrar con el problema de que la imagen puede ser muy grande para determinados dispositivos. Para evitarlo podemos hacer dos cosas:

  1. Una imagen más pequeña para las pantallas con resolución más baja.
  2. Media Queries para indicarle al navegador a partir de qué resolución debe utilizar una u otra.

Os dejamos el código a insertar;

@media only screen and (max-width: 767px) {

#wrapper {

background-image: url(‘https://nombre-de-la-foto.jpg’);

}

Guardamos los cambios y subimos el archivo a la misma ruta de donde lo descargamos. Si el cambio no se visualiza en tu tienda online recuerda limpiar cache y refrescar.

Si no os funciona este sistema podéis probar a cambiar #wrapper por body

Centro de preferencias de privacidad

    1
    Hola ¿podemos ayudarte?
    Powered by