Background image on a row

Hi guys!

Is it possible to add something in the Mobile CSS styles for a row, to hide the selected background image, when browsing on a phone? Or maybe to have it use another picture as a background image?

Hi,

Thank you for contacting us. I am happy to help with your queries.

Can you share a link to the page, that contains the row/section needing help with, so I can inspect it further to find out the possible solution to suggest?

Regards,
Kharis
aThemes Support

Hi Kharis.

The page is at www.doffe.no

As of now I’ve stripped down all the background images, as the page is running terribly slow, but that’s another issue. :stuck_out_tongue:

I’m looking at the last row, with the contact form, and also the 3rd row, where I’ve got the services showing, on the right hand side.

Hello,

First thanks for using our Sydney theme!

Probably that’s possible, but please note we need the images showing in your website to provide the custom CSS code. Your website opens fast here. This mean you probably are adding images with very large size (in KBS or MBS). Try to optimize these images and upload again to the website. Here’s a good service to optimize images:

Once you have the images added and published to the website again, please let us know and we can proceed with this thread.

We await to proceed here.

Kind Regards,

Rodrigo,

aThemes Support

So, I tried something different. Instead of adding row backgrounds, and getting the parallax effect, I added a site background. But, in 1920x1080, that doesn’t look well on an iPhone. Is there a way I can get the image to adjust to the screen size? I also tried, using css, to replace the image with a smaller one when browsing by phone, but it doesn’t seem to work at all…

www.doffe.no

Hello,

That’s because “background-attachment: fixed;” is not supported on Safari browser.

Please try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
(function($) {
    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if( isSafari ) {
        $(window).on('load', function(){
            $('#page').prepend('<div class="custom-bg"></div>');
            $('.custom-bg').css({
                position: 'fixed',
                width: '100vw',
                height: '100vh',
                'background-image': 'url("https://doffe.no/wp-content/uploads/2021/05/Doffe-background-600x338-1.jpg")',
                'background-size': 'cover',
                'z-index': '-1'
            });
        });
    }
})(jQuery);

Also, please create a new image with a mobile phone portrai aspect ratio. No need the black space on the side of the image. Something like that:

Upload this new image to the website and change the URL in the JS code provided.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo,

aThemes Support

Hi Rodrigo.

Still struggling with background for mobiles for www.doffe.no. I’ve made an image with the same resolution as for snap filters, so that format should be well suited. But, there are two things I don’t quite understand.

  1. When using the Live Editor, without having added a special image for cell phones, it looks fine. (See below screenshot)

  2. when adding css code I found here on the forum, to set a separate image for use on mobiles, it doesn’t work, so I’m getting the image set for use on PCs. Both on my PC and on my cell, I’m using Chrome. Here’s the code I’m using;
    @media only screen and (max-width: 767px) {
    body.custom-background {
    background-image: url(‘https://doffe.no/wp-content/uploads/2021/05/Mobil-background-Doffe-web-1080x2340-1.jpg’);

    }
    }

Tablet:

Cell:

Hello,

Please try with the !important flag:

@media only screen and (max-width: 767px) {
    body.custom-background {
        background-image: url('https://doffe.no/wp-content/uploads/2021/05/Mobil-background-Doffe-web-1080x2340-1.jpg') !important;
    }
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

That did the trick! At least a little bit. I’ve got a few more questions, to get this sorted all out, looking better…

  1. Is it possible to fix the image, top left? And, is it possible to get it to adjust the size according to the screen? Or should I use a smaller sized image? It still looks kinda corky when it zooms, and also the image size gets wider than the screen…

  2. And, also for a temporary solution, until I get some new pictures that looks good, in the right format: how to just have a black background image for the site, when using mobile…?

  3. Is there a piece of css code that only enables the background image, for the frontpage? Or, in another way: how to disable it for services, and other pages…?

Hello,

Great!

  1. You mean on mobile, right ? I saw you already have a code there, but it’s forcing to not show the image. Please try changing to like the image below:
    image
    2 You can do that by removing all background-image CSS code, and maintain only the background-color: #000000; like in the above image.
  2. The home page has a class identifies that is “home”, then you can use this to apply the custom CSS code only in the home page. Eg:

    body.custom-background.home {
         // CSS code here
    }

    @media only screen and (max-width: 767px) {
        body.custom-background.home {
            // CSS code here
        }
    }

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo. :slight_smile:
Yeah, the issues are on mobile.

As of now, it seems like it’s either not loading, or something is wrong with the scaling. On my mobile, the image is not responsive, and turns out too wide for the screen. Anything wrong with this code?

@media only screen and (max-width: 767px) {
body.custom-background {
background-image: url(https://doffe.no/wp-content/uploads/2021/05/Mobil-background-Doffe-web-1080x2340-1.jpg) !important;
background-position: left top;
max-width:100%;
height:auto;
background-color: #000000;
/* For background color only. No image
background-image: none !important;
background-color: #000000;
background-attachment: fixed !important;*/

}
}

Hello,

The problem is the background attachment fixed (that do not works on iPhones):
image

My suggestion for you is follow my tips on this previous reply I’ve sent for you:
https://forums.athemes.com/t/background-image-on-a-row/43273/6?u=rodrigo

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support