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.
Related
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 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%;
}
I try to have 4 full-screen background image ( i think it's called hero section) on my page.
I used this style for every row with full-screen background.
.kimiabg {
background: url(http://kimia-tak.com/wp-content/uploads/2018/02/s2.jpg);
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
padding: 2rem 0;
}
everything is fine. unless showing background on iphone. it is blurry. I really do not know what is the problem.
you can check the live website here : http://kimia-tak.com
The background-attachment: fixed; is the problem. This is not really supported on iOS Safari.
Can I use background-attachment ?
iOS Safari:
Partial support refers to supporting local but not fixed
Only supports local when -webkit-overflow-scrolling: touch is not used
https://caniuse.com/#search=background-attachment
For more information and workarounds you can look at the answer from #fernandopasik to a similar question: https://stackoverflow.com/a/23420490/7426156
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 have created a webdesign with used body:before tag to 'split' the design, similar to the TwentyFifteen theme of WordPress (https://wordpress.org/themes/twentyfifteen/)
But I don't use a color for the "left" column, but an image. The Code works in all browsers fine (Chrome, FF, Safari) but not in IE (Version 9-11).
The CSS looks like:
body::before {
background: url("img/back-left.jpg") no-repeat center top ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 30%;
z-index: 1;
}
The effect: the background picture was not showing, when open the page with IE. When I go to a sub-site, the picture was showing. When I transform the browser windows, the picture was showing. When I change ANYTHING (no matter what) in IE Dev toolbar, the picture was showing.
If I use background-color instead of background (or background-image), it works fine on IE.
Any ideas? I think it sounds like a rendering thing. The background image was rendered too late and so was not showing (instead I interact everthing on the page). But how to fix it?
I found a 'solution', that run into an other problem. ;-)
When I set
html, body { overflow: auto; }
Then, the background-image was displayed proper in IE 10 and IE 11. But now I have the IE 11 smooth scrolling problem (The background image jump all over the place when using the mouse wheel. When using the scrollbar, it works fine).
Anyway, this variant is better for me, than not displaying the background-image. So I still hoping, that MS correct the smooth-scrolling bug.
I made a fork in CodePen with this correction: http://codepen.io/anon/pen/rabMMm
(this was the originally CodePen code: http://codepen.io/anon/pen/qEwEVy)
Or did any knows a solution to fix the smooth scrolling prolem from IE?