I have a hit a problem where my background-image does not render on mobile devices (tested on IOS).
The problem seems to be due to the fact I use
html{
position: fixed;
}
in my project, and this is needed, so I don't want to remove it.
The background image renders just fine on my desktop computer, it's just not working on my iDevices (haven't checked android).
I made a jsfiddle (https://jsfiddle.net/q19srbba/2/) test, you will notice the background image won't render on IOS Safari.
Is there any possible work arounds to get the background-image to render without removing html{ position: fixed; } ?
JsFiddle Code:
body{
background: url('http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1487701021/eiffel-tower-paris-france-EIFFEL0217.jpg?itok=m0MZOYjh');
}
html{
position: fixed;
}
Looks like your html element is collapsing. Add width / height 100% to your html element:
body{
background: url('http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1487701021/eiffel-tower-paris-france-EIFFEL0217.jpg?itok=m0MZOYjh');
}
html{
position: fixed;
width: 100%;
height: 100%;
}
Related
for some reason animated webp backgrounds for css on firefox for me are not animating unless something on the screen is updating, but it works on chromium just fine, is there any way to get it to work on firefox too?
body {
margin: auto;
display: table;
background: url('i/blossom.webp');
background-attachment: fixed;
background-size: cover;
background-color: #222222;
}
As Kaiido has pointed out, the problem seems to lie with the displaying of body as table.
One way round this is to remove the animated background from the body itself and put it onto a pseudo before element which is displayed as an inline-block.
Setting this as position fixed behind the main body has the same effect as setting the background-attachment to fixed on the body - ie the background remains during scrolling.
body {
margin: auto;
display: table;
background-color: #222222;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: inline-block;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/61/Solar_system_orrery_inner_planets.webp');
background-size: cover;
}
<body></body>
Note: this method of fixing a background also works for Safari which at the present time has bugs in relation to background-attachment (see https://caniuse.com/?search=background-attachment ) - although testing on an iPad, IOS 15, the rendering of the webp was stepwise rather than continuous.
Before you try to close: I know that there are similar questions and answers out there, however none of these solutions work for me, rather just locking scrolling all together. This could possibly be because I am using a website template from w3schools.
I am making a website for a school project where I would like the background to be a picture of tree leaves. Unfortunately, this image doesn't seem to cover the full page, causing it to repeat downwards. This is an issue.
I have used background-attachment: fixed; to solve this issue on chrome (for windows), but have discovered that safari does not support this.
The website's code can be accessed: here. (Control + U for page source)
tldr; I need to find an equivalent to background-attachment: fixed; for safari that works for my website.
TIP: You will have to test the page in safari to see the issue.
You can't keep the background on the actual body in this case because of the Safari attachment-fixed problem as you point out.
You can however put the background on a pseudo element and then use the 'ordinary' CSS fixed position so it stays in place even as you scroll down.
Here's a basic example:
body {
width: 100vw;
height: 200vh;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
background-size: cover;
z-index: -1; /* added */
}
Note: the background size is set to cover so the whole viewport is covered whatever its aspect ratio (some of the img may get cropped either top/bottom or at the sides so that it fits).
I want to load a huge jpg with 48000x990px as background-image.
HTML:
<div id="car-canvas-wrapper">
<div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>
CSS
html,
body {
padding: 0;
margin: 0;
}
#car-canvas-wrapper {
width:100%;
position: relative;
}
#car-canvas {
background-size: cover;
width: 100%;
padding-top: 51.5625%;
}
You will find a example in CodePen: https://codepen.io/anon/pen/ypyMpZ
In Chrome, Edge, Internet Explorer and Safari everything works great. But in Firefox there are some heavy problems. Sometimes the image loads when i clean the cache. If its loads and i resize the window, the image disappear. In the inspector i see, after resize, that the background-image got 0x0px.
Obviously the picture is too big. Question: Why can all browsers except Firefox display the image?
Edit: I removed the huge image from my webserver and insert a placeholder image (48000x320px). Keep that in mind if you have a similar problem and read this thread.
Firefox fix on images could be more than just this simple solution but i have found this as a working solution on previous project.
Just add the following css:
#car-canvas-wrapper { display: block;}
Should do the trick.
morning,
Question regarding layout shift in Chrome with background image.
Page is: http://tcia.org/TCIExpo/2017_Attendees/TCIExpo/Attendees/2017_Attendees.aspx
Fixed full width page background shifts slightly as if it is resizing, width-wise, when loading new page but only in Chrome. FF, IE is fine.
I've tried everything I could find far as adding to/altering CSS goes but no luck.
CSS:
body
{
font-size: 17px;
background: url(https://www.tcia.org/images/TCIExpo/backgrounds/back-a3.jpg)
top center no-repeat;background-attachment: fixed;
background-color: #aaba59;
width: 100%;
height: 100%;
position: absolute;
}
I'd really appreciate suggestions. Thank you.
Bob H
I was given this design that I'm trying to apply to my website. Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here, but appear halfway down the page here.
You have height: 100% set for your html and body. This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower.
height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit:
Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.