añadir imagen background prestashop 1.7

Añadir imagen de fondo Prestashop 1.7

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

About the author: Franky Martin (ADMIN)

12 comments to “Añadir imagen de fondo Prestashop 1.7”

You can leave a reply or Trackback this post.

  1. francisco javier - 30 octubre, 2017 at 20:56 Reply

    Gracias por el aporte,
    Sabrias decirme como cambiar el color de texto por defecto que trae la plantilla 1.7 default de prestashop?
    Te lo agradeceria mucho.
    Saludos

  2. admin - 31 octubre, 2017 at 12:36 Reply

    Hola Francisco, prueba a instalar el módulo color change que da la posibilidad de cambiar algunos colores pricipales en PS 1.7.

  3. Pedro - 12 enero, 2018 at 12:39 Reply

    Gracias por la información.
    ¿Podrías ayudarme?. He cambiado casi todos los colores que necesitaba cambiar en la plantilla, pero no se como cambiar los colores de 2 sitios.
    Uno es: En el mainmenu he cambiado los colores de letra pero al abrirlo el fondo sigue estando blanco, me gustaría cambiarlo.
    El otro: en el bloque de texto personalizado el color de fondo es blanco y me gustaría cambiarlo.
    No se si se hace desde módulos, desde Themes… ¿Cuales son los archivos?
    Gracias.

  4. Miguel - 13 febrero, 2018 at 19:24 Reply

    No me funciona…¿?¿?

  5. admin - 14 febrero, 2018 at 13:01 Reply

    Hola Pedro, para cambiar los colores puedes editar el archivo 1ch.css que genera el módulo Colorchange que se encuentra en la ruta;
    /modules/colorchange/views/css
    En este archivo puedes cambiar más colores y si no te funciona puedes añadir css personalizado en el archivo custom.css que se encuentra en la ruta:
    themes/classic/assets/css

    Si no consigues hacerlo pídenos presupuesto y te lo solucionamos.

  6. admin - 14 febrero, 2018 at 13:02 Reply

    Hola Miguel, envíanos una captura de pantalla a info@vegaweb.es para tener más datos del error.

  7. leandro Junior Escobar Vente - 29 agosto, 2018 at 0:36 Reply

    hola de cuanto tiene que ser el fondo de la imagen,
    las medidas?

  8. Franky Martin (ADMIN) - 29 agosto, 2018 at 11:06 Reply

    Hola Leandro, en la prueba realizada hemos usado una imagen de 1920px por 1278px optimizada para web para reducir su peso.

  9. Santiago - 26 septiembre, 2018 at 16:54 Reply

    Hola buenos días, he realizado los pasos, este es mi código:
    #wrapper{
    background: url(../themes/classic/assets/css/img);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    Pero no veo nada de cambio, he realizado todo hasta cambié el “#wrapper” por “body”, eliminé caché de navegador y de mi web pero nada… qué puede estar mal?
    Tengo prestashop 1.7.4.2

  10. Franky Martin (ADMIN) - 26 septiembre, 2018 at 17:32 Reply

    Hola Santiago, ¿cuál es la ruta de la imagen?

  11. Franky Martin (ADMIN) - 27 septiembre, 2018 at 10:19 Reply

    Hola Santiago, prueba a poner directamente la url como ves en este ejemplo;
    background-image: url(‘https://nombre-de-la-foto.jpg’);

Leave a Reply

Your email address will not be published.

seis − uno =