Home Forums Weaver Xtreme Theme Fixed Background

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #74735
    ROBIN
    Participant

    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

    #74737
    scrambler
    Moderator

    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)

     

    #74744
    ROBIN
    Participant

    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!

    #74745
    ROBIN
    Participant

    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;}
    }

    #74746
    scrambler
    Moderator

    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;}
    }

    #74747
    ROBIN
    Participant

    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.

    #74748
    scrambler
    Moderator

    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;}
    }

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.