Background Colour Working but background image not

[smokingjacket]

I would like it to be so that when you bounce the website on an iphone and the background colour momentarily shows that an image is displayed instead of a colour.

body {
background-color: #c7466196!important;
}

works fine

However when I use this code:

body {
font-style: normal;
font-weight: 400;
color: #999999;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1024px-Cat03.jpg)!important;
background-position: center;
background-color: transparent;
}

White is displayed but no image (I have used a generic image online for demonstration purposes)

Does anyone have any solutions?

Thanks!

[mldarshana]

Hi Chiara,

Thanks for writing in! Those background colors and background images can be set through X -> Theme Options -> Layout & Design -> Background Options area.

Hope that helps.

[smokingjacket]

Thanks very much for getting back to me, I have used that and the same issue occurs!

I load a background, have the colour set to transparent and it does not display at all.

Even when I used CSS editor it does not seem to work.

Thanks

[paul.r]

Hi,

It’s because in renew stack, the content area is being set to have background by default.
That covers your body background and making it not visible.

To remove the white background, you can add this in Theme Options > CSS

.site, .x-site {   
    background-color: transparent !important;
}

Thanks

[smokingjacket]

Dear Paul,

Thank you very much for getting back to me, I’m very grateful for your response. Your solution has done something unexpected.

It has removed the background colour of the main body, allowing the photo to shine through, however the photograph does not display in the section which is visible when the browser ‘bounces’ the page - which ordinarily would show you the background image / colour (though in my case, even with your solution it does not show any image at all).

Does that make sense?

I attach some annotated screenshots which I help add clarity to what I am asking for.

Thanks

[rad]

Hi Chiara,

In that case, may I know where do you expect to see the background image? Because the only way for it to be seen is making the above section transparent. It’s like adding a cover to an image but wishes to see it which is not possible.

About the bounce area, it still yellow on my end. Are you referring when scroll up and down?

Thanks!

[smokingjacket]

Yes, by bounce area I mean when you scroll up and down, the browser will allow you to move the whole page up above the browser window, revealing the background colour.

In the image that I attached on the left, you can see that the area aforementioned is yellow and yet the background of the main body is white. That is exactly what I want to do, except I would like the yellow to be a repeated background image.

The solution given to me seems to have flipped those parameters in that the ‘bounce area’ shows no image / colour but does show an image in the main body.

Surely if it is possible to have a colour (i.e yellow) in this ‘bounce area’ as shown in the first image but not have that colour shown elsewhere - it is also possible to have an image?

Thank you so much @Rad @paul.r for your help, hugely appreciated

[rad]

Hi Chiara,

The background color doesn’t work the same as background image, the background image will only cover the area but will not stretch the way how yellow covers it all. So yes, it will remain yellow regardless and background image is only applicable on the upper part since it’s image and not a color.

And I see no point adding background image if you don’t wish to see it through your existing sections. So yes, all you could do is add background image with the combination of above CSS, ignoring the bounce area (it’s specific to browser so there is no standard CSS).

Thanks!

[smokingjacket]

Hi @Rad

Are you saying, therefore, that there is no way to get a repeated pattern (i.e an image) in that bounce area?

Nothing at all I can do?

Thanks,

Smokingjacket

[christian]

Hey SmokingJacket,

Still using Paul’s advice to make the site container transparent , try removing the image in X > Theme Options > Layout & Design > Background Options and apply a background to the body again using CSS again but this time set background-size to cover like:

body {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1024px-Cat03.jpg)!important;
  background-size: cover;
}

The reason for that is the theme’s image background option uses JavaScript to cover the page and that might not react quickly or not work at all for the “bounce” behavior.

That is the last workaround we can offer. If that does not help, please consult with a third party developer to continue supporting the phone’s bounce behavior.

Thanks.