Site logo

Archived topic

Hola Me gustaría saber como poner un fondo para pc y una foto para movil

45 replies · Started by Jaime Rodriguez Fernandez on March 11, 2022

Viewing posts 16–30 of 46

It can be done but it will require code.
How do you intend to create that header ?

Hola, en una web hecha con wordpres y Generate press premium, en una página, quiero que se vea una imagen de fondo en cabecero del pc, y que se vea una imagen fija en jpg en movil, para que aunque sea la misma imagen, en el pc poder darle un efecto y en móvil que se vea fija normal.

Saludos. Jaime

Hola, tal y como me dijiste, esta es la base de fondo que voy a poner, no se como quitarle los laterales blancos, no encuentro de donde se ajusta para que el fondo salga a toda pantalla. https://videnteatiendopersonalmente.com/

Y ahora a ver si me podéis explicar como hacer que la imagen aparezca completa en el móvil.

Saludos. Jaime

OK.
First off make you Page Full Width by setting the Content Container to Full Width :

https://docs.generatepress.com/article/content-container/

Now can you select the Container Block that has the Background image, and go to Advanced > Additional CSS Class(es) and enter responsive-bg-one

Then you can add some CSS to change the background for mobile:

@media(max-width: 768px) {
    .gb-container.responsive-bg-one:before {
        background-image: url('add_your_mobile_image_url');
    }
}

Change add_your_mobile_image_url to the URL of the image you want to display on mobile

Ya lo he hecho, e ingresado en Additional CSS Class(es), he seleccionado móvil y he puesto:

@media(max-width: 768px) {
.gb-container.responsive-bg-one:before {
background-image: url('http://videnteatiendopersonalmente.com/wp-content/uploads/2022/03/AdobeStock_2558769853-compressed.jpg');
}
}

pero sigue igual no se adapta a la pantalla si lo miras por movil, verás como se ve.

Saludos. jaime

Me acabo de dar cuenta de que lo que he puesto en adiccional css, se borra, desaparece aunque actualice la página se borra cuando me cambio por ejemplo a vista escritorio y vuelvo a vista móvil, ya no está el css para móvil.

Me he dado cuenta, de que en el enlace que me pones:
Agregar CSS: http://docs.generatepress.com/article/adding-css/

arriba pone esto:

Contenedor de contenido
A partir de GeneratePress 3.0, la opción de Contenedor de generador de páginas anterior se ha renombrado como opción Contenedor de contenido.

Y yo tengo la versión: Versión 2.1.2

Y ahí ya no entiendo nada, porque el plugin está actualizado, ¿o existe otra versión, como pone en el articulo?

. Saludos. jaime

Ya lo he hecho, https://docs.generatepress.com/article/content-container/.

Ya lo he hecho, e ingresado en Additional CSS Class(es), seleccionó móvil y he puesto:

@media (max-width: 768px) {
.gb-container.responsive-bg-one:before {
background-image: url(' http://videnteatiendopersonalmente.com/wp-content/uploads/2022/03/AdobeStock_2558769853- comprimido.jpg’ ;);
}
}

pero sigue igual no se adapta a la pantalla si lo mira por movil, verás como se ve.

Saludos. jaime

I do not see those changes.
Lets begin again:

1. Go to Customizer > Additional CSS and add this code:

@media(max-width: 768px) {
    .gb-container.responsive-bg-one:before {
        background-image: url('add_your_mobile_image_url');
    }
}

2. Edit the page, and select the Container Block with the Background image.
Select the Advanced > Additional CSS CLasses and add: responsive-bg-one

https://www.screencast.com/t/1xnH2fxYQhh

Ya lo he hecho, y en simple css he puesto lo que me has dicho, con la dirección que me sale en medios de la imagen utilizada como fondo, y he sustituido:

@media(max-width: 768px) {
.gb-container.responsive-bg-one:before {
background-image: url('add_your_mobile_image_url');
}
}

Por:
@media (max-width: 768px) {
.gb-container.responsive-bg-one:before {
background-image: url(' http://videnteatiendopersonalmente.com/wp-content/uploads/2022/03/AdobeStock_2558769853- comprimido.jpg' ;);
}
}

que es la dirección web de la imagen y no funciona, cuando vuelvo a página móvil css, me ha desaparecido responsive-bg-one.

o sea que desaparece, no lo guarda y no se porque.

Si quieres te doy acceso a la página y lo miras, o te conectas por remoto, pero como me lo estas diciendo no funciona.

Saludos. Jaime

Hola, he borrado la página y la he vuelto a hacer, se ve mejor que antes, pero no es lo que te pedía al principio, lo que quiero saber si se puede hacer es esto: tarotmarga.teletarot.net , pero me has dado ideas para ir probando, pero como me has dicho, no queda como yo te explique, que lo puedes ver en esta web: tarotmarga.teletarot.net

1. I don't see theresponsive-bg-one class has been added to the Container block. Make sure follow the instruction David provided here in step 2:
https://generatepress.com/forums/topic/hola-me-gustaria-saber-como-poner-un-fondo-para-pc-y-una-foto-para-movil/page/2/#post-2155685

2. Add the image as the background image of the image (choose pseudo element, not element), do NOT use an image block:
https://docs.generateblocks.com/article/container-overview/#backgrounds
https://www.screencast.com/t/hzqRxCeKdlxl

This archived topic is closed to new replies.