I am creating a website and I define my background image in the css.
Here is my CSS Code.
body
{
background-image: url('../background_image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
This is applied to all of my pages.
It works on all desktop pages, but on mobile, it only works on the index page.
I link the pages to the css file using the following at the bottom of the head
<link rel="stylesheet" type="text/css" href="css/general.css">
All of the page files can reference the image correctly since everything works on desktop.
I have heard about a bug in the android system, but since it works on the index page on mobile, i don't think that this is it.
Thanks in advance.
Use the following format:
background-image: url('http://example.com/folder/background_image.jpg');
Turns out that the background image was being "pushed down" the page on mobile.
In my css, I had background-position: center; which centers the image on the page horizontally, but the top position was variable.
Changing this to background-position: center top; allowed me to see the background image on mobile.
I eventually changed it to background-position: center -200px; to get the desired positioning.
Thank you to everyone who helped!
Related
Sorry if this has been answered elsewhere; the only other place I could find this issue mentioned is here but the answer given there doesn't seem relevant to my site, but I'm happy to be proven wrong.
I'm working on a site in Next.js (although I don't think the framework is relevant because this project used to be create-react-app and the same issue occurred) and our site background is a fixed starry-sky image. I'm applying that across the site by doing this in my global app.scss filesheet:
html {
background-image: url(../public/images/background.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-color: black;
}
This works perfectly on my desktop browser – on all viewport sizes. The first screenshot is how the site looks when using Chrome's devtools to simulate a mobile display, after reloading the site from scratch with that viewport and everything. The second screenshot is when opening the site from an actual mobile device (an iPhone XS on the Chrome mobile browser). You can see that the background image is super zoomed-in:
I don't know how I could inspect the styles being applied on my phone browser, so it's hard to figure out the cause of this. Anybody have any ideas?
Maybe it stretchs because of background-size: cover;. Depends how much you can scroll. I would change this property: background-repeat: repeat-y;. Happend to me once as well.
Somehow I had missed this question, which says that background-attachment: fixed is unsuppored on mobile browsers. So I gave up applying the image as a background to the html element and instead added a <div id="background" /> with this styling:
#background {
z-index: -1;
background-image: url(../public/images/background.jpg);
height: 100vh;
width: 100vw;
position: fixed;
background-size: cover;
background-position: center;
}
That fixed the issue.
I'm trying to add a background image to my Dash/Plotly dashboard. I have done this by modifying the css using the following:
body {
height:100%;
background-image: url("/assets/rink.jpg");
background-size: cover;
background-position: center top;
position: fixed;}
This displays the image - it looks great - but it wipes out everything else on the dashboard. How do I push the image to the background (I want to send it to the back)?
Thanks
I figured it out. I had referred to the css in the html.Div([],style='body'). I removed the style='body' and now it's truely in the background and looks great!
I've been fiddling with my background image in CSS for a couple hours now and have tried searching through articles to find a solution but still have nothing. I'm trying to make my background image fit the screen no matter what the browser size.
At first I was using this CSS code which seemed to be working:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
But then when I re-sized the browser this happened: http://prntscr.com/j1d4kv
I then went and found another solution that said I should put the background image in the html tag, which i tried:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
}
This fixed the issue of the background image not fitting to the bottom when the browser size changed, but then I had this issue when I was full screened: http://prntscr.com/j1d742 It left a gap on the right side!
Most likely your body doesn't reach the full height of the browser window, if it doesn't have much content. Add this to correct that:
html, body {
height: 100%;
}
You want to add,
background-attachment: fixed;
Here's an example: https://embed.plnkr.co/3Y7O1TQa8ssPQKVq0tCW/
So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
I have a mobile web application based on jQM. I have a background image with the following styles applied to it:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: cover;
}
The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:
After some action, (like tapping on an element, the background comes back to focus like this:
I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I've tried:
SO link 1
SO link 2
What you see on top (I mean the CSS) is the default un-edited style applied.
Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I'm not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.
THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.
Please tell me if I'm doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)
Try this:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
background-size: cover;
}
The following CSS for "html" solves my issues with full page background images on Android devices:
html{
height:100%;
width:100%
}
body{
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Hope that helps.