I'm trying to make background image not moving on scroll with background-attachment: fixed. But this only works in Chrome and IE11. Id does not work in Firefox and Edge. Could someone tell me what I'm doing wrong because this should be pretty basic thing to work. Also i have tried to put another div inside the .header-homepage with position: fixed and full width and height but that is also not working in Firefox or edge and it also breaks everything in chrome for some reasons. Same thing for pseudo element on .header-homepage.
css
html {
min-height: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
background: #000;
}
.header-homepage {
background-image: url("https://images.unsplash.com/16/unsplash_5263605581e32_1.JPG");
background-repeat: no-repeat;
background-position: bottom;
background-attachment: fixed;
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
html
<!--header-->
<header class="header-homepage">
<!--intro-->
<div class="header-homepage__intro">
<h1>
Text
</h1>
<div class="header-homepage__intro__description">
Text text text
</div>
</div>
<!--end intro-->
</header>
<!--end header-->
Demo: http://codepen.io/riogrande/pen/LxeVbR
Related
i want position my background image in the bottom right of my page :
.bg{
background-image: url("Wave.png");
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 85%;
background-position: bottom 0px right 0px;
background-origin: content-box;
}
The bg class is the global container of my html
<body class="background">
<div class="bg">
</div>
</div
when there is not much content in the page i have no problem it is displayed correctly
but when there is more rows in my table i have this problem
any ideas please i can't figure out what's wrong ?
Try this:
.bg{
background: url("Wave.png") no-repeat;
width: 100%;
height: 100%;
position: absolute;
right: 0;
bottom: 0;
background-attachment: fixed;
overflow-y: scroll;
background-size: contain;
background-position: bottom;
}
EDIT:
<body>
<div class="bg">
<div>
...
</div>
</div>
</body>
Some explanations:
Setting background-attachment: fixed makes the background fixed on the page when you scroll.
The content should then be restricted within the div by setting overflow-y: scroll; so that, in your case where you have a table that can be longer than the div, the table will be constrained inside the div with scrolling enabled, and it won't extend outside the div.
background-position: bottom is also enough.
I notice the closing tag for your body element is a </div that is not enclosed properly. You should change the </div to </body>. If you already closed the body in your full code, you can remove the unnecessary </div
Try this
.bg{
background-image: url("Wave.png");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-origin: content-box;
}
I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.
https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment
I've found a similar question here but with no answer, yet I can't find an alternative as a solution.
I have the following code and it works perfectly on Mac and Windows, however I can't figure out why on Android (either Chrome or Firefox) the background does not get updated when the user is scrolling down, it produces the space of about 1/5 of the screen at the bottom while scrolling down.
The background image gets updated after you release the touch.
html{
background-image:url(example.jpg);
background-position:fixed;
background-size:100% 100%;
}
Specify a height for your html and body, i.e.
html {
width: 100%;
height: 100%;
}
And
body {
height: 100%;
min-height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
And add a div that will wrap everything inside body, i.e.
<body>
<div id="wrapmeup">
....your content....
</div>
</body>
And finally add this to your css:
#wrapmeup {
height: 100%;
width: 100%;
background-image: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
I have element with:
background-image url('../images/belly.png')
background-position 50% 50%
background-repeat no-repeat
background-attachment fixed
background-size cover
And underlying element with position: fixed;
And if I scroll page background is not redrawing. Problem appear in Chrome. Any solution?
demo: http://silentimp.github.io/90daysofbelly/
video: https://www.youtube.com/watch?v=av6jZciNszo&feature=youtu.be
I have noticed the best way to make sure the page backgound stays fixed no matter what is: place it as the background image of an empty first child of body, with these CSS rules:
.background-holder {
position: fixed;
width: 100%;
height: 100%;
display: block;
z-index: -10;
background-image: url(//link-to-image);
background-size: cover;
}
And here's the page structure:
<html>
<head>
</head>
<body>
<div class="background-holder"></div>
<div class="main-container">
<!-- content goes here -->
</div>
</body>
</html>
I had the same issue you had and struggled with it for almost 3 days. But as of June 2020 and improving on #tao's answer, here is a reliable solution I found for this that works on all devices and has 100% browser compatibility. It allows the desired effect in any place of the page and not just the top or bottom of the page, and you can create as many as you need or want.
The only known issue is with safari. The browser repaints the whole image every scroll movement so it puts a heavy burden on graphics and most of the time makes the image flicker up and down some 10px. There is literally no fix for this, but I think there is also no better response for your inquire.
I hope this works for you. You can check the results live in www.theargw.com, where I have three different fixed background images.
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}
<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>
--------------------- EDIT ---------------------
The code posted was missing the background wrapper that allows the background to not change size and maintain the fixed position. Sorry to post the wrong code this morning guys! But here is the change.
Have a look at this page: rozbub
As you see, there is a fix header on the top and a scrollable content below. The content inside the black div scrolls well, but the image is fixed. How can I let this image scroll too?
Basically, I defined the main wrappers as following:
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
}
#generalWrapper{
height: 100%;
}
#header{
height: 70px;
width: 100%;
background: #080808;
}
#content{
overflow: auto;
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
background: url("../images/background.jpg");
background-repeat: repeat-y;
}
with a structure like
<body>
<generalWrapper>
<header>
</header>
<content>
</content>
</generalWrapper>
</body>
Then, the content div is filled with elements (which make this div taller than the screen and results in scrollability). But why is the background image not affected?
It looks like you are scrolling divs inside your content div, but the content div itself is not scrolled.
Try to look through the list of errors found on your site by W3C's Markup validator.
I tried a different approach. First of all, I put the background image on the html, with following attributes
html{
background: url("../background.jpg") center center #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then, I changed the header and content to
#header{
height: 70px;
width: 100%;
background: #080808;
position: fixed;
z-index: 55;
box-shadow: 5px 5px 5px 5px #080808;
}
#content{
position: absolute;
width: 100%;
top: 70px;
bottom: 0;
}
which results in exactly that behaviour I desired (Although the problem considered by Jules Mazur in the comment is not solved, I will try to solve this by providing different images for different resolutions).
Try setting the background-attacment to scroll. MDN has documentation for this property.