Neve theme change background image of a specific page on mobile

Hey @curtismany

Thank you for sharing the URL. The reason why this image cuts off on smaller screen sizes, is because it’s a background image. Here is an article that explains in detail why background images behave like that in general –?https://docs.themeisle.com/article/1232-why-background-images-arent-responsive. It’s not an aspect related to the theme.

The solution is to add the image in content instead of the background one, and it will be automatically adjusted for all screen sizes.

I hope this helps.

Thank you!

If you are looking to have different background image for mobile and desktop version then you can do this by passing the CSS through media queries –

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

body.page-id-981 { 
background-image: url("https://wallpaperaccess.com/full/1975186.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}
    }

Thank you!

This is exactly what I was looking for. Thanks mate, worked like a charm.

Hey @curtismany

I am glad that I could help. Please mark this thread as resolved if you don’t have further questions.

Have a great day!

Hi, I’m using neve template, and add differents background images in differents pages, anf@media to change the image to show in movil version, it works great, but can not make them scroll in the page. so in the pages taht have more text the image is resize to the height and only see the center. Can I make fixed (or that the page scrools over the background image?) Excuse if I can not say clear enough.

In this in the PC version works fine, but in movil doesn,t work. There′s something that I’m missing but I can’t find what is.

I appreciate your help

/* PRUEBA1 */

body.page-id-2905 {

background-image:url("https://www.sebastianvinet.dance/wp-content/uploads/2023/11/inicio-1920.jpg");
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed, scroll;
}
	
@media (min-width: 700px) {
  .container {
    width: auto !important;
  }
}
/* imagen a mostrar más peque?a */
@media screen and (max-width: 400px) {
body.page-id-2905
 {	   
background-image: url("https://www.sebastianvinet.dance/wp-content/uploads/2023/11/inicio-1920.jpg"); 
	display:none;
background-image: url("https://www.sebastianvinet.dance/wp-content/uploads/2023/11/inicio-720.jpg"); 
background-attachment: fixed, scroll;
	display: absolute;	
	 background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 

    }
}

I forgot to give the link to tha page where I’m workking on.

https://www.sebastianvinet.dance/prueba1/

Hello @lorela_l,

If you encounter any issues while using Neve, please open a new ticket in the support forum and we’ll be happy to help there.

Best regards,

Irinel