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
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 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.
I want to have something like facebook cover, I came across this jsfiddle in this community.
.cover { width: 100%; height: 180px; overflow: hidden; background-color: black; }
.cover > img { position: relative; width: 100%; top: 50%; margin-top: -50%; }
But there is a problem when I see the cover image in the responsive mode the image re-adjusts itself! i.e in desktop mode in the bycycle driver's head does not show, but in other small device modes the driver's head is visible.
Question:
How can I make a constant & responsive cover image like facebook?
P.S: Please note that the user will modify the cover image view point just like what facebook does!
You can try using a background-image instead, so you can set:
background-size: cover;
background-position: center;
This would stretch the image to fill the entire element without losing ratio.
See the Updated Fiddle
Alright, for my site users/members have an option to upload/link a custom image to use for the start page of my site. This works well with nearly all new browsers that support background-size. But does not fill in the entire div section with the image if the browser does not support css3 background-size.
Yesterday I had a chance to test my site on a 25"inch monitor and ended up realizing the image display part failed. What ended up happening is that the image was shifted to the left.
Today checking the code I forgot that I had this line in "background-position: top left;" but I remembered why I left it in the code, the moment I add "top center" or just "top" the background is still displayed however there is like 6 - 10 px white gab to the left of it. I tried using left: 0px; but can't get it to work since I am using position: fixed; and if I change it to position: absolute it displays full image which ends up creating a scroll bar on the bottom.
Here is the code for the CSS part I am using at the moment
#cpBackgroundImg {
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}
and here is the other part of the code which actually displays the image
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>
Can some one tell me how to fix this problem?
- Thanks
http://jsfiddle.net/Hnwjg/6/
width: 1600px;
Is that monitor you tested it on have a resolution larger than 1600? If so the div looks like it's limiting the width of your image to 1600. meaning there will be white space on the right of the image?
Just a thought.