Have background image stretch vertically and horizontially

My new WordPress website is new.poipubeachestates.net/WordPress which uses Travelify. The old website is www.poipubeachestates.net. How would I have the background stretch both vertically and horizontally on mobile screens, like it does on the old site? Or at least not zoom in to a level where you just see a miniscule portion of the image? Any help would be greatly appreciated. Thanks.

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

body.custom-background{
  background-size: 100% 100%!important;
}

Best Regards,
Support

Thanks for your assistance. The code worked perfectly. Sort of. But it’s not your fault. My old website uses the following code to get the background to stretch to the size of the screen and float in the background as you scroll down the page:

In the style section it has this code:
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

Or this code for <!–[if IE 6]>
#page-background {position:absolute; z-index:-1;}

And finally this is the code in the body:
img src="images/sunset.jpg" width="100%" height="100%" alt="A Beautiful Sunset near Poipu Beach" />

This makes it so there is a floating div in the background. Unfortunately on my phone, the page http://www.new.poipubeachestates.net/wordpress/documents/ isn’t appearing correctly as it’s stretching the background all the way down to the bottom. The plugin I’m using for that page is Document Gallery 4.3.1 (Document Gallery – WordPress plugin | WordPress.org)

Hey there,
Thanks for keeping in touch with us.

If you’d like, we could exclude the mobile breakpoint from the CSS by applying a media query.

Just replace the code previously given with the code below:

@media (min-width: 550px){
body.custom-background{
  background-size: 100% 100%!important;
     }
}

Essentially, what we’re doing here is ensuring that the code doesn’t affect phones.

I hope this helps :slight_smile:

Best Regards,
Support

This problem just went from simple to complex. On the documents, photos and contact pages, I have a two-fold problem. One is that when I set the background width with @media (min-width: 550px) they ignore any custom requests for background size. In essence, they do not acknowledge the fact that I’m viewing those pages on a mobile phone.

When I remove the @media (min-width: 550px) restriction, I can get those pages to stretch correctly on a mobile phone by lowering the percentage on the height. However, each page stretches vertically differently. i used the following code for the documents page:

body.custom-background{
  background-size: 100% 15%!important;
     }
}

The documents page appears on a mobile phone perfectly. However, 15% wasn’t correct for the other two pages. If you look at these 3 pages on a mobile phone, you’ll see exactly what I’m describing here. And on top of that because this is not restricted exclusively to mobile devices, it may look perfect on a mobile phone, but it won’t look right in a desktop setting.

What’s odd is that when I request to stretch these pages 100% for both width and height, the width works fine and understands only to stretch to the sides of the phone. How is is that it recognizes that the width is less than 550px, but won’t acknowledge code with @media (min-width: 550px) ? I think there must be a simple solution here that I’m missing. Thanks for all the help. Here’s the link to the pages, which will appear to have the background only take up 15% of the height of the screen on the desktop:

 

Does anyone have an idea of how to solve this? The link for the website is http://www.poipubeachestates.net/wordpress. Thanks for all of your help.

Hi there,
Thanks for keeping in touch with us.

Could you change min-width for mobile phone CSS to max-width please, I think that’s the issue. Min-width caters to devices over 550px, and max-width caters to devices under 550px

Best Regards,
Support

I used the following code:

@media (max-width: 550px)
body.custom-background{
  background-size: 100% 15%!important;
     }

and the page http://www.poipubeachestates.net/wordpress/documents/ did not render properly, but when I removed @media (max-width: 550px) it worked fine.

Unfortunately the issue still remains. How to get the pages to recognize when they are on mobile and then how to provide specific mobile background for each mobile page. Thanks for the help.

I’ve gotten past the first hurdle with this code:

@media (max-width: 550px){
body.custom-background{
  background-size: 100% 15% !important;     }
}

But the code to have a specific background for the documents page is not working:

body.page-id-8 {
@media (max-width: 550px){
body.custom-background{
  background-size: 100% 15% !important;     }
}
}

It appears that the custom CSS is not recognizing the body.page-id-8 limitation; if I remove @media (max-width: 550px) the page doesn’t respond correctly either. Thanks for all the help, I’m almost there!

Hi there,
Thanks for keeping in touch with us.

Yeah, that code won’t work.

If you’d like to have a custom background image for that specific page only on mobile, the code to use is this:

@media(max-width: 550px){
body.page-id-8.custom-background{
background-image: url(“yourimagelinkhere”)!important;
background-size: 100% 15% !important;
}
}

Please replace “yourimagelinkhere” with the actual link to the custom image.

I hope this helps :slight_smile:

Best Regards,
Support

It worked flawlessly with this code:

@media(max-width: 550px){
body.page-id-8.custom-background{
background-size: 100% 15% !important;
}
}

Thanks for all your help!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support