I'm having a very strange problem with the background on a site. I'm using multiple background images; there's 4 photos and then an SVG of angled shapes that goes overtop of the images and frames them. This is the CSS for the body background
body {
background-color: #bbe2de;
background-image: url('/img/mobile-bg-exorcised.svg');
background-position: top center;
background-repeat: no-repeat;
color: #2a2a2a;
font-family: "ff-din-web";
font-size: 16px;
line-height: 1.4em;
}
@media screen and (min-width: 600px) {
body {
background:
url('/img/desktop-bg.svg') top left,
url('/img/bg-photo-4.jpg') 849px 4460px,
url('/img/bg-photo-3.jpg') 0 3948px,
url('/img/bg-photo-2.jpg') 617px 980px,
url('/img/bg-photo-1.jpg') 0 186px;
background-repeat: no-repeat;
}
}
It displays properly on all desktop browsers, but on iPad the SVG just doesn't show up at all. The rest of the images show fine. I'm using SVGs as background images elsewhere on the site and they display fine, so I don't think it's a server issue like MIME type.
Here's a link to the site, live: http://johnkatimaris.thesmackpack.com/
And here's the SVG file in question in case you think there might be something wrong with it specifically: http://d.pr/f/2vp4
Any ideas as to why it's not working?
I've run into this problem again on a different site with a different SVG file and had the same issue. It SEEMS like there's some kind of undocumented limit to how tall the iPad will display an SVG. That doesn't really make sense and I really don't think it's actually the case but it's the only thing I can think of, since making the image shorter fixes it immediately in both cases.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments