i've added background images using CSS on the banner section of a few pages on a Wordpress site and they work fine on desktop on Chrome/Safari/IE/Firefox using auto-prefixer. For some reason on mobile browsers (I've tested on Chrome and Safari on my iPhone), some of the banner images display correctly while the others do not.
.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}
The image on the left is of a page which displays the background image correctly and the image on the right is of a page which does not. Both have exactly the same css apart from the image used:
UPDATE:
After some advice from the guys, I tried to resize some of the images to see if they worked on Chrome/Safari on Mobile:
As you can see the resized images did work on both Chrome and Safari on my iPhone. Apple's IOS documentation recommend a maximum size of 1024px but 1400px worked fine for me (although I did have to delete cookies and data in Safari settings on my phone)
So, what are some other differences between those two images? Mostly pertaining to pixel size.
Mobile Safari has a pixel threshold, which actually has nothing to do with size in kb of the image, but the amount of pixels. What are the sizes of the images that aren't displaying? Are they longer or taller than the ones that are?
Here is a link to the Safari Web Content Guide. Scroll down to the Known iOS Resource limits and see if you fall under any of those categories!
This 2014 question is apparently still relevant in 2021. I just had an issue of a full page background image not loading on a OnePlus 5 when it loaded fine on every other device. Resized the image to 1400px width as per above comment from SlightlyClever, made that variant the one shown on mobile version, and it loads up fine. At the same time cut down the download from ~3MB to a bit under 1MB so that's nice too.
Related
When opening this website https://www.sitepor500...com.br (please replace the 3 dots with just one so this link does not get any SEO juice as many of you may complain) you can see there is an image as background and an overlay of a specific pattern on top of the images at the background.
On Chrome everything works fine, however on FF I see strange patterns on the screen, like the image attached. I have my zoom set to 100% (I know using zoom different than 100% may cause this problem in any other browser because of moirè effect) and everything else on the FF is in the defaults.
So I ask you, is there any CSS property that I can set to the overlay so Firefox renders it right?
I realized this bug only happens when my WINDOWS is at 125% scale (which is the only recommended option). See the image:
I couldn't repeat your issue on the 100% scaled screen. But maybe you should add background-size: 1px 2px; to those background image in #slideshow_fundo1
<div style="position:absolute; left:0px; top:0px; width:100%; height:100%; background:url(imagens/vegas-04.png) top left repeat; background-attachment:fixed; background-size: 1px 2px;"></div>
This will fix the size of background-image to it's native size and prevent those scale issues.
UPDATED
In your Windows Display settings, set your Scale and layout to 100%. Worked for me. Tested your issue on FF with 125% - recreated your screenshot.
this happens in firefox on windows machines when scale and layout are set to 125%. If you press ctrl shift - twice and go back to 80% in firefox it is ok. But that is rediculous.
This is not related to notebooks (in brasil) only. This happens in any windows machine using scale layout 125% on any screen size. I believe FF should fix this problem. You can use any other browser and it does not happen.
Did you report this to firefox?
I'm making the layout in sections. Image/Text/Image/Text... and the images have this CSS :
#change {
background-image: url("../images/main.png");
background-attachment: fixed;
background-repeat: repeat;
background-size: cover;
}
HTML
<section id="change"
data-type="background"
data-speed="5"
data-selection="0"
style="height: 630px;
background-position: 50% 16px">
On a PC the images are displayed nicely. But on a mobile device the images are not corresponding to the CSS but displaying in full-res. Hence I see only a corner of a 5000x3500px image. I'm using Bootstrap in this project and Safari (iPhone 4s).
It's currently on a free host so excuse me for adds. (Also I didn't work yet on minimizing load time for the images, so sorry for that too.)
The website:
http://viso.lv/imigracija/
UPDATE: It seems that only iPhones have a problem of displaying the images. Because several people with other phones have the images just right. What can I do about that? I tried 3 different browsers. Nothing changed.
I don't quite understand what you're asking. For me (Samsung Galaxy S3 Mini) the images look fine. There's some lag when scrolling, but that's perfectly natural for a mobile browser (Firefox Mobile) handling large images with CSS.
Unless there's another issue other than positioning, which is the fault of a browser without strong CSS skills, then there isn't much you can do, sorry.
Basic Scenario:
I have an image that is 2048x1536.
I have an html file that displays this image via CSS that specifies a width of 1024 and height of 768.
I have an UIWebView that displays that html page.
Problem:
On an iOS6 device, that image is resized to fit within that 1024x768 area. On an iOS7 device, that image is cropped to only display the top left quarter of the image.
Since iOS7, Chrome, and Safari all do the cropping option, I do believe that is the correct behavior (I strongly suspect that the latest webkit was updated to match this standard behavior). However, for business reasons, I still need the resize behavior.
Question:
Is it possible to still to keep that resize behavior even on iOS7?
EDIT - Additional info based on comments:
I presented a highly simplified scenario. I can't just put the image into an image view. The feature within my app allows 3rd parties to load their HTML content into it. Also, related to that, I can NOT modify the HTML contents. Basically, all I can do is create a NSUrlRequest for that HTML content and tell the UIWebView to load it via loadRequest.
Below are the HTML snippet and CSS snippet. But please keep in mind that I can't change this. I only control the objective-c end of things.
<body >
<div id="wrapper">
</div>
</body>
#wrapper {
background-color: #FFF;
position: relative;
width: 1024px;
height: 768px;
background: #FFF url(images/bg.jpg) no-repeat top left;
background-size: contain;
overflow: hidden;}
I'm using 3 background images to display as icon for a mobile site which appear perfectly fine on my computer (using window sizes and user agents), however, on my iphone the icon is cut off as if the padding isn't high enough.
This is how it appears on desktop ^
However, on mobile it has this effect v
Any ideas what's causing this? the padding, when set to 20%, is enough to display the icon with a few pixels left over in all screen sizes, but even when set to 22% it doesn't display correctly so I'm assuming it's an iOS bug.
I'm using ios7 and safari if that helps!
.icon-ticket
{
background: url("#{path-img}icons/icon-ticket-2x.png") no-repeat;
}
.icon-players,
.icon-prize,
.icon-ticket
{
background-size: 40%;
padding: 22% 0;
}
I think this is related to an issue I'm seeing:
What's happening as far as I can tell is that iOS Safari is obscuring the background of the box model with the padding. Same thing happens with the background-color property (see my post linked above).
Seems like a bug. Only workaround at this point is to remove padding for elements with backgrounds.
I'm currently working on a WordPress theme and I've got it up & running here: http://tinyurl.com/kawesnh
I'm trying to make the image shown in the background cross-compatible with the iPhone's safari browser, but have failed to do so :)
I'd like to have the background scroll with the page's content, but haven't found how to do this, while also having the background resize for the iPhone browser.
Here's my CSS, which produces an initially good-looking layout on the iPhone, but resizes the content after a link is clicked, also it's producing a bad result on desktop browsing:
CSS
body {
background: url(http://www.myurl.co/tq/wp-content/uploads/2013/07/TQ-Oceanside_BGtaller.jpg) no-repeat center center fixed;
background-position: center top;
background-color: #000000;
}
Thanks for your help!
Try using CSS3 media queries. Media queries are used by most themes on wordpress because they make your website responsive and makes your background resize to the browser's size. Here's a tutorial:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries