I'am busy with my website, and now I have a issue.
When i scroll down to my contact page, my browser starts to lagg, because i have a background image with the property scroll, and size cover.
So i googled a bit and the result was that the property cover causes the laggs.
How can i fix this? I need my background size covered because i have my website responsive
My code:
background-attachment: scroll, fixed;
background-color: #666;
background-image: url("../images/black.png"), url("../images/bg-footer.jpg");
background-position: center, center center;
background-size: cover, cover;
Can i ask why you need to use background-attachment: scroll at all?
You have set the background image to cover the full width of its container, which means it's not going to change position on scroll anyway.
You are forcing the browser to recalculate the image size whenever you scroll the mouse, causing the lag.
You could also try using other properties like contain or 100% width to fix your image.
Related
I'm creating a website, using chrome to debug. I am creating a scrolling page with full height images as background images for my divisions, using "background-size: cover;" and "background-attachment: fixed;".
On chrome's (mobile) debug viewer on my pc, even though there is more scrolling text then could fit over the image, the image stays the same size, and the content just scrolls over an image that is not zoomed in or distorted.
After uploading to s3 and viewing on my mobile device, the background-image for the div with a lot of content zooms the photo in (assuming it does this to continue coverage), to a point which it does not look good.
So far I have tried changing the background-attachment of the content wrapper to fixed, and then scroll just to see if it would work; it did not. The only thing that has allowed the background image to NOT zoom in, was to change the background-size from cover, to 100% 80%;. This kept the original zoom, but obviously did not cover all of the text, causing there to be a gap between one full size image div, and the next.
` .second-page{
background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
background-repeat: no-repeat;
min-height: 100vh;
min-width: 100vw;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.content{
margin-right: 15%;
margin-left: 15%;
}`
Expected Results: background-image covers 100% of viewport on mobile, allowing text and other content to scroll over it without zooming in
Actual Results: background-image zooms in to cover all of content area, causing pixelation and bad visual experience.
As most times I post to this site, as soon as I post my question I come up with the answer. For anyone in a similar situation I fixed this by adding
max-height: 100vh;
overflow-y: scroll;
Hope this helps someone else!
I'm trying to show the full background image as a landing page, then the content appears when the user scrolls down, however the bottom of the background image is usually cut off (depending on browser resolution).
I'm trying:
background-attachment: fixed;
background-size: cover;
Here is a codepen that demonstrates the issues:
https://codepen.io/suez/full/wulBv/
You can see that the bottom of the first image with Iron Man is cut off. Here is the full image (https://i.imgur.com/PbV1Grl.jpg).
Is there a way to show the full height of an image? Even if you need to scroll down more to see it?
use css:
background-size: 100% 100%;
You can add background-position: bottom
https://codepen.io/anon/pen/XMMVYo
It won't show the full height in most cases, but it will show the bottom of the image.
Or you use background-size: contain and (in this particular situation) combine it with a white background color
EDIT: White won't work, I didn't look close enough. Here's approximately what I mean, but it's not really satisfying, since there isn't just one color at the border of the image:
https://codepen.io/anon/pen/zZZpMX
You can use background-size with 100% height and width.
Remove
background-size:cover;
Replace with:
background-size:100% 100%;
my first post here.
Something on my own website is bothering me for a really long time. The thing is that when I'm visiting my website on my Android phone and scroll through the page, the background image keeps 'adjusting', so there is a stutterlike event continiously occuring when scrolling through the website. You can visit it here: http://www.bramvalstar.nl
The background class:
.achtergrond {
position: relative;
width: auto;
height: 95%;
background: url(media/images/xxx.png) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
Thanks in advance.
Yeah, that is the affect of using relative page height. You see, when the page loads, the available viewport height is slightly less than 100% as the address bar occupies some space on top. When you scroll down, the address bar disappears and the viewport height jumps back to 100%, thus your page re-adjusts to the new available height. Unfortunately, there is no way to fix this in css. You can either use a fixed height not a relative one, or set the height using javascript at load time.
hope this is what you are looking for
.achtergrond {background-attachment:fixed;}
The background image I have setup works fine in web browser, it stays static, but on mobile the background is constantly changing depending on the height of content?
When the content is short on mobile the background isnt zoomed in but basically shows the left Third of the photo. When the content is long paragraph it is a much more zoomed portion of the first third of the photo.
I am currently using the current css
background-image: url("/images/midgame.jpg");
background-size: cover;
background-attachment: fixed;
overflow-x: hidden;
If you do not want the background image to zoom in or out, remove the background-size: cover
Also try background-position: center top
Set explicit dimensions so that the background image appears when there is little or no content. Set height:100%. Might have to set width as well.
EDIT:
Remove background-attachment:fixed
Add min-height:500px or whatever number you wish.
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down