Fixed Background

[ROBIN]

I am using this code for the fixed background

#content {
background-image: url("https://bluemountain-pools.com/wp-content/uploads/2024/06/Try-This-one.jpg"); no-repeat center;
background-size:cover;
background-attachment: fixed;
}

It looks great on the desktop but I need it to look different on the mobile application. I am thinking I need more square images for the phone application or can I use CSS to do a more responsive image so I can see the entire thing?

When I look at https://mtnmoddesign.com/ their fixed images are more centered, like they were cropped.

my site is Bluemountain-pools.com

[scrambler]

There are only two ways to do it with size cover, which will crop the image depending on the difference between the image format and the browser format. You can control what gets cropped by choosing the vertical and horizontal positioning.
They are using a background-position:center  CSS property to have it centered vertically and horizontally.

And size contain, which will always show the whole image but have black area depending on the format difference.

If you want to closely control what happen when there is a mismatch between the ratio of the image and the ratio of the browser, you can used media rule to use different images for different ratios, like explained in this article

Optimizing Parallax images for portrait and landscape – Weaver Xtreme Guide (weavertheme.com)

 

[ROBIN]

Sometimes I miss the most obvious ways to fix my problem.
When I saw this in the code no-repeat center;  I thought it was already centered.

Adding the CSS worked great.

I will be using this layout a lot in the future!

I really appreciate your insight when I am at a loss.

Thank you!

[ROBIN]

Well, I was wrong.  It looks awful on IPhone

I didn’t use Parallax so how would I alter the code below to reference just the background image?

+@media screen and (orientation:portrait) {
.parallax#post-xxx-p {background-image:url(PortraitImageUrl) !important;}
}

[scrambler]

Change the selector to match the one you used for the other background rules

.page-id-23 #content

+@media screen and (orientation:portrait) {
.page-id-23 #content {background-image:url(PortraitImageUrl) !important;}
}

[ROBIN]

Thanks, That didn’t fix it, but we gave it a heck of a try.

I think I am going to give up. I am now on the hunt for a plug in that allows me to create separate pages for mobile renditions.

I appreciate you always being willing to lend a hand.

[scrambler]

Actually there was an error.

The rule use + this is if you put the rule in the Page editing page CSS, in which case you do noty need the page id selector, but I think there is a bug right now with per page CSS.

So you need to put the rule without the + in the theme Global custom CSS rule box

@media screen and (orientation:portrait) {
.page-id-23 #content {background-image:url(PortraitImageUrl) !important;}
}

[Author]

Posts