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
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
Begin by building the Desktop version using a Block Element:
https://docs.generatepress.com/article/block-element-page-hero/
Once that's built we can explain how to swap the image on mobile
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
The CSS i provided here:
Just add it to the Customizer > Additional CSS
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
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