I have a question, which I don't even know how to google. I set a two-row layout. On the left side is a container with a background image, which is fixed:
.image {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-image: url('/splash_1.png');
background-size: contain;
background-attachment: fixed;
}
This works so far so good. But when i scroll the page (in my case on my macbook with the trackpad) like a "swipe up" or "swipe down" (as done in mobiles to reload a page), the image scrolls too and leaves a white space.
To explain it better, I recorded the screen in following animated Gif:
Is there a way to prevent this from happening?
Try this CSS propert overscroll-behavior: contain;.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Related
I've been trying to fit the video into the full screen but had no luck. As per pics the video has two (white) pillars (Please click on the picture), the video dimension is 1280x720. I have tried changing the dimension of the video which didn't work. Can anyone help with this, please?
This video is in a section
Below CSS
#myVideo {
position: fixed;
background-size: cover;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
filter: brightness(60%);}
remove margin from body and html
html, body{
margin: 0;
}
If still doesn't work, then open developers pane in Google Chrome and highlight the white area to see which element is generating the white space.
Seems like a margin issue with the video div, or a padding issue with whatever parent div. Link to page?
I've searched just about every string of words possible to try and find a solution to this issue and have had no luck. Here's the code I have for the header:
/* MAIN HEADER */
.header {
background-image: url(../images/kt-header2.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: fixed;
background-size: cover;
margin: 0;
padding-top: 0em;
padding-bottom: 5em;
overflow: hidden;
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is what the header img looks like when the browser is smaller.
This is what it looks like when the browser is larger.
For all I know, this is a mess and the solution is obvious. I've been trying to piece things together with no previous knowledge of css, so I'm flying blind here.
I have linked a recreation of the code as a comment under the first comment on this post. Because I am a new user, I can't put more than 2 links in this post.
Did you try to add a set height to the header? If you add the set height, it won't be overcome by the other elements on a larger browser
I added: .header{height: 100px;) (used another image)
https://jsfiddle.net/toolbox3/8Lbdx2fm/
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;
}
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
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;
}