My background image just works fine in the browser but when I open the site on my mobile or tablet the background image (set on body) doesn't show and it just shows a blank white background.
This is the code im using to set my background:
body {
background:url('../img/bg.jpg') top fixed no-repeat;
}
Can anyone tell me why my image doesn't work on mobile devices?
Thanks!
Related
My site looks good from computer's browsers, I've tried all different browsers, they all look as I intended. But when I tried it from my Samsung Galaxy phone's Chrome browser, something is not right. There are alternating blue and white sections on my page, on the mobile phone's browser, the blue sections got cut off on the right side, left with white space [ it should be all the way to the right ], yet now it looks like this :
What should I do to make it look like from a computer's browser ?
You can view the source code of the page from your browser's "view source" function.
The site is at : https://gatecybertech.com
There area a number of ways to fix this.
Remove white space with CSS
To simply remove the white space you could add a
body {
background: #yourcolor;
}
Make image responsive
How ever I would suggest setting the width of your image with a size in vw. This will make your images responsive.
You could also do what the below answer says and use SVGs or media queries but I tested the using the size in vw and found it worked just fine
Application
This is how you can set your images width with vw
#yourimageid {
width: 2vw;
height: auto;
}
Hope this helped!
The problem is a few of your images.
e.g.
first the Ted Murphee image
then the gate frame .png image
What is happening is the rest of your content is resizing to a smaller screen, while the images stay the same size and create that "whitespace" to the right.
What can you do ?
use .svg images so they will resize depending on the screen size
add a #media query, and make the images resize when the browser size changes
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.
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
I have a background image that is 1024 x 1024 pixels; the reason for these dimensions is that I want the image cover the screen in both landscape and portrait modes. The image has a small logo right in the center of it, but otherwise it is a simple gradient. I want the image always centered; in other words, the logo must always in the center of the screen, in landscape and portrait orientations. I also want the image covering the whole screen, but don't want the background image creating unnecessary scrollbars; so I don't want it to be possible to move the image by dragging it around the screen.
Here is what I have tried (and for the sake of this example I am just using a style tag in the HTML):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
html,body {
width:100%;
height:100%;
}
body {
background-image: url('../img/background.jpg');
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
</style>
</head>
<body>
Hello world.
</body>
</html>
The issue with the code here is that the image is not centered (in portrait mode the logo shows to the right of the screen, in landscape at the bottom of the screen). It also seems that the background image becomes part of the page content so it causes scrollbars, meaning that the image can be dragged left and right.
I would prefer a solution that is just CSS and html, but will accept one with Javascript if it works. Please don't mention issues pertaining to other browsers here, I am specifically asking about Mobile Safari in this question. I have tried a LOT of the suggestions made in various answers and I am yet to find a solution that works correctly in Mobile Safari.
So here are my requirements again in point form:
background image always covers the whole screen (no white space showing)
image always centered (so overflow evenly divided between left and right/top and bottom)
image stays centered when iPad is rotated between landscape and portrait
background image is fixed (cannot be moved)
preferably a solution using just HTML and CSS (CSS3 is also fine)
Anwyone know how this can be done?
Update:
This problem might lie between the computer and the chair! ;) I will post an update when I have sorted out an issue in my UIWebview.
Ok. It is confirmed. There is nothing to see here! :) This problem was all of my own doing and the HTML that I provided actually works correctly. This went wrong because the HTML being loaded is an error screen and in trying to "fake" the error situation I caused an actual error where the UIWebview was loaded before it was ready. When I load the HTML at the correct time, then the centering suddenly works and the scrollbars dissappear. Everything 100%.
Background images have no height and width, their height and width is dependent on the parent's height and width in which they are applied to. So it is impossible for a background image to create scroll bars.
If you want the background image to resize depending on the screen size, use this:
background-size: cover;