I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.
My code is here:
HTML
<div class="con row1">
<p>Some text here just to flesh out example</p>
</div>
<div class="grad-space">
</div>
<div class="con row2">
<p>Some text here just to flesh out example</p>
</div>
CSS
.con {
height: 100vh; }
.grad-space {
height: 50vh; }
.row1 {
background: url('https://s-media-cache- ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }
.row2 {
background: url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }
Here's a link to the codepen showing exactly what I'm talking about:
http://codepen.io/reskk/pen/qaYJwq
Edit: Fullpage Codepen: http://codepen.io/reskk/full/qaYJwq/
Now strangely enough when I resize the browser down to a small width (say 800px) the scrolling actually becomes very smooth - just as you'd want it to appear on a finished project.
When the browser is at its max width (and max height, which you can't quite fully get on codepen due to to the code-input box) that is where the janky, choppy scrolling happens.
I've done extensive searching on this and haven't been able to find a solution.
Does anyone have any ideas on this? It's such a gorgeous effect but is unfortunately made useless by the performance it yields.
Thanks,
Reskk
You know you can see any codepen in full page? Fullpage Codepen
About your choppy effect, what you probably are looking is a scroll animation smoother, not sure if this is the right term. What it does is that delays the mouse scroll effect, or reduces "line jumps" height, making the movement look better.
CSS Parallax by davidwalsh
Edit removed frameworks/libraries references (offtopic)
I was stressing with the same problem, and found a lovely solution here: https://medium.com/vehikl-news/fixed-background-image-performance-issue-6b7d9e2dbc55
Essentially, you need to remove the background image from your .rows and move it to a :before element for each. That way you're not using background-position: fixed, but rather position: fixed on your pseudo element.
.hero {
min-height: 100%;
position: relative;
overflow: hidden;
&::before {
background-image: url('background-image.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
Related
I found that sometimes when images shrink with Css background, they looks sharpen/blurry/glitch...?
Anyway, they look weird.
Here I have two div with same effect but different approach, the left one use the IMG tag and the right one use a DIV with background image.
with img tag
<div class="left">
<img src="/image.jpg" alt="test"></img>
</div>
.left {
flex: 0 0 $img-w-pc;
height: $img-w-pc * $img-ratio;
position: relative;
overflow: hidden;
img {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
with background-image
<div class="right" style="background-image: url(/image.jpg)"></div>
.right{
flex: 0 0 $img-w-pc;
height: $img-w-pc * $img-ratio;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
The original image size is 1280 x 720 and when it's shrinking with the background-image it'll looks glitch.
However if I use a smaller image or enlarge the div, make the image "not shrink that much", then it'll be fine.
I test it on Chrome and FireFox and only the former with this problem.
What is the cause of it? Is this some special behaviors with Chrome?
Update
I create a codepen here: https://codepen.io/timtnlee/pen/GRjmxVK
Try adding the image-rendering: pixelated; declaration to the styles for your background image.
https://css-tricks.com/almanac/properties/i/image-rendering/
My objective is to have a full-screen parallax background that is blurred.
The problem is that when you blur an element it no longer spans the full size of the container (because the edges are blurry). I found an example that suggested using transform:scale in order to stretch it just a little bigger than the size required for 'cover', although now this now makes it so that when you scroll down the page the background slowly moves down as well (once again exposing the blurred edges).
HTML
<div class="viewport"></div>
CSS
.viewport {
background-image: url("images/img1.jpg");
background-attachment: fixed;
filter: blur(7px);
position: relative;
transform: scale(1.1);
background-size: cover;
background-position: center;
height: 130vh;
z-index: -1;
}
Consider putting the viewport in a viewport-wrapper with hidden overflow?
HTML
<div class="viewport-wrapper"><div class="viewport"></div></div>
CSS
.viewport-wrapper {
overflow: hidden;
}
Codepen
Example[1]http://themeforest.net/item/skilt-a-wordpress-theme-for-frequent-bloggers/7936499?ref=tbd
How do i get the affect of the image how there is a background image then a background color for the text (extra, and can i get the text background to flow along the top)? i know i am asking a vague question but i am still a nub. ^_^
Thank you (in advance if you can answer it).
The website has a div with a background image that has a fixed position and covers the entire browser window.
body {
background-color: #0c0c0c;
}
#background-image {
opacity: 0.7;
background-image: url(some_image.jpg);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
With HTML like this:
<div id="background-image"></div>
<div class="container>
<div id="content">
<p>Lorem ipsum some stuff</p>
</div>
</div>
Its a very cool effect and you should try replicate it on a website that you make. Keep working on it until you figure it out.
Here is a good place to start: http://css-tricks.com/perfect-full-page-background-image/
You can always set both a background image and a background color at the same time with CSS:
body {
background-image:url(url/to/your/image);
background-color:#CCCCCC;
}
EDIT: if you are asking about how the background image stays in place, you can also add background-attachment:fixed;. This is a lot simpler than making a separate div with a fixed position, and it is semantically correct too.
I have this fiddle I'm playing with to crop and center an image. It works quite well, but I would need the wrapping div.test to have the same width of the image. This is not possible: if I set the width of the img to 300px the magic does not work. I think it's because of the span I use to center the image. I think it leaves a kind of space footprint (maybe the space between letters or words?).
So: how to make its space effects "invisibles"?
Update
My original purpose was: resize the image horizontally and crop-and-center vertically + compatibility from IE8 >. All done with CSS. The solution linked above is almost close to the solution, but not perfect (the little space on the left). That's why I asked for a fix on it.
I am not positive if I am understanding your dilemma, however, I think something like this may be what you are looking for. Here is the link to JSFiddle (http://jsfiddle.net/bUrmK/2/).
HTML:
<div class="test">
<div class="before">
</div>
CSS:
.test {
background-color: grey;
overflow: hidden;
width: 300px;
}
.before {
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 100%;
height: 100px;
background-position: center;
background-size: cover;
/*This will allow for LTE IE-8*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale')";
}
I get it now, you can use a single div:
HTML
<div class="cropped"></div>
CSS
.cropped{
background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
width: 300px;
height: 200px;
background-position: center;
background-size: cover;
}
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
You can use this code to make a fixed background layer to hack into this problem.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just changed the background size and background attachment to make the image static.
Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:
-webkit-background-size: 2650px 1440px;
(hat tip to commenter Mac)
I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.
I'm not that profi one, but I've solved this problem usin' jquery.
It's quite simple)
Here is the code:
jQuery(window).scroll(function(){
var fromtop = jQuery(window).scrollTop();
jQuery(" your element ").css({"background-position-y": fromtop+"px"});
});
next solution in Css:
body {
background-image: url( ../images/fundobola.jpg );
background-position: top center;background-repeat:no-repeat;
background-size: 1900px 1104px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
--- not use---- (cause: scroll disable )
position: fixed
Resolved in Ipad and iPhone
Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed . To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('imageURL');
background-repeat: no-repeat;
}