Background Images Not Showing In Mobile

With the new editor i created a new home page. the images that are in the background at the top and further down the page do not show correctly and it makes the mobile version look bad.

Is there a optimization for the mobile version of the site?

www.daniellefostercreations.com is the site

Edited by

It seems to only be with the safari browser on mobile. I don't have an iphone so can you compare this page:

http://www.sytist.net/page-templates/index.php?view=template&peid=8715d2d3573a4a0ad4e76d4de0539cbd
and this one:

http://dev.sytist.com/test-page/index.php?view=template&peid=8715d2d3573a4a0ad4e76d4de0539cbd

And tell me if there is any difference?

Edited by

Those both look the same in any browser on my phone. There is no images i can see clearly

Edited by

Can you check this one again?
http://dev.sytist.com/test-page/index.php?view=template&peid=8715d2d3573a4a0ad4e76d4de0539cbd

Might have to refresh.

Edited by

I am seeing no images on the first 3 then a pattern i can tell is a picture but can only see part of a horse head when i turn the phone to landscape. And i can kind of see flowers on the last one.

Edited by

I am using safari, chrome, and Firefox to view by the way.

On my site it is the large background images that don’t work as well. The images in the smaller block columns work.

Edited by

The one doing it is the fixed background, the one that stays fixed as it scrolls. I have made a few more tweaks so if you can, check this page again

http://dev.sytist.com/test-page/index.php?view=template&peid=8715d2d3573a4a0ad4e76d4de0539cbd

This is what it should look like

Edited by

Yes now that looks right

Edited by

Mine still doesn’t. But we used a different template than that one

Edited by

That's because I will have to release an update with the updated code.

If you go to Design -> edit my theme

click additional CSS and add this code to it, it may fix yours for now.

.fixedbg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
box-sizing: content-box;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

@media (max-width: 1024px) {
.fixedbg { background-attachment: scroll; }
}

Edited by

I’m ok for now. I would rather wait for your fix than mess with adding code.
Just happy to help with finding issues that need attention

Edited by