Two background images

zombiedad
(@zombiedad)

9 years, 11 months ago
So, the site looks great unless it is viewed on an iPhone.

Then I get a duplicating background.
Site looks fine until you scroll and find the background image is duplicated.
One scrolls with the page, the other overlays (and underlays) some of the mobile site.
(Seen here!)

What am I doing wrong?
I have set the background image in the customise section,
and added custom css for the background as follows …
```
@media (max-width: 702px){
body.custom-background {
background-size: 100%;
background-position:center 40px !important;
.home-header-wrap background-image: url("http://daisysays.co.uk/wp-content/uploads/2016/06/MainBGLogo.png") !important;

}
```
Removing the css completely resizes the background on mobile so it is bigger than the screen, removing the background image in customization removes the image completely.

Why do I have two images for the background operating differently?

Viewing 5 replies - 1 through 5 (of 5 total)

Suyogya Shukla
(@themeislesupport)

9 years, 11 months ago
Hey there,

Just replace the CSS you added with following:
```
body.custom-background{
background-size: cover!important;
}
```
Add this using Advanced CSS Editor. Let us know how it goes 🙂
Thread Starter zombiedad
(@zombiedad)

9 years, 11 months ago

Tried that before, this happens on desktop …
Logo too big

It should look like this …
Logo correct size

It also still displays two images on the mobile version. One small, one large.

Uriahs Victor
(@uriahs-victor)

9 years, 11 months ago

Hi there,

The background image is not recommended to have text on it because of the issues you are having.

It will be very difficult getting the image to size properly and show the message for devices because the background image is attached to the body tag

If you want to do this then you could try deleting the content from the big title section using a child theme (make sure to use a child theme or else your changes will be lost when updating the theme) then adding a div and applying your image to it.

docs.themeisle.com/article/14-how-to-create-a-child-theme

Best regards,
Uriahs

Thread Starter zombiedad
(@zombiedad)

9 years, 11 months ago

I have switched it out for an image without text, it makes no difference.
The text is a part of the image so therefore an image itself.
It isn’t independent text.

However it still does the same duplicating thing even with just an image that has no text.

Bruce Mesnekoff
(@brucemesnekoff)

9 years, 11 months ago

you saved my lots of time.

Thanks

bruce mesnekoff