On this page, http://www.espn.com/espn/feature/story/_/id/12748163/floyd-mayweather-prepares-2-fight-seal-legacy, if you scroll a while you will get to an image (a fixed background ) which does not respond to your scrolling action for a second or so... I call this temporarily stick parallax effect but this is my way of referring to this difficult to describe effect.
Does anyone know what it is that makes this temporarily freezing the image like that? I think it is a fantastic effect.
None of the parallax tutorial sites I checked do this kind of a demo.
This effect is achieved quite easily:
If you inspect the picture elements, you will find that this is just a fixed background-image:
#section-1 .section-photo-break.chapter01 {
background-attachment: fixed;
background-position: center 44px;
background-repeat: repeat-y;
background-size: cover;
border-bottom: 0;
}
However, this effect doesn't work on i(e)OS this way^^
Related
I came upon a problem while designing a jumbotron for a website.
It's outside the container. Created a background for it, set background-size to cover, worked great.
When I opened the front page on a wider screen, the jumbotron became larger and there were gaps since the background image was too wide.
I then tried background-size: 100% 100%, thinking the image would stretch. No changes. Thought I perhaps had a margin/padding issue. No changes again.
Is this a problem with the image or the jumbotron? I'm not sure how to solve this. No matter what image I pick, it behaves very differently on different devices.
Behaving differently on different devices is not a bug, it's a feature. Having said that, try this...
background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
If you want the image to stretch to fit the full element (even if it means losing proportion), you need to set background-attachment to fixed and the background-size to 100%. Like:
.jumbotron {
background-image: url(image.url);
background-size: 100% 100%;
background-attachment: fixed;
}
Working example:
https://jsfiddle.net/4w9u7m1a/2/
I am working on my webpage. I am facing couple of problems at the moment:
Images do not adapt to the size of the browser window, if I make the browser window smaller image will be shown as repeated
I want, that each picture take the whole display
How can I do that footer and menu stay visible during the scrolling?
Here is the link to Codepen
#intro{
background-image: url("http://www.tricentis.com/wp-content/uploads/2015/10/photo-1435575653489-b0873ec954e2.jpg");
padding-top: 30px;
background-size: cover;
height: 100vh;
background-size: 100%;
}
Thank you in advance for your help
doesn't do any good to set background size to cover if you're going to set it to 100% a couple lines down. remove background-size:100% and it works fine.
You can set
background-repeat: no-repeat;
to make sure each image isn't shown more than once.
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
I have this CSS to show a water mark inside a div:
background-image: url("../Images/Watermark02.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
the behavior is shown in the below image, can somebody help me and tell me what is missing to get it to work on Chrome just like FF?
You can fix this by removing background-attachment: fixed. The "fixed" value is relative to the screen, not the you have the background image inside of. Granted it's possible this is due to something else, but I will need to see the rest of your CSS/HTML.
background-attachment: fixed; /* Remove this */
I've set up a jsfiddle for you here: http://jsfiddle.net/HkBh4/
What I want is for the background video to fit the screen lengthwise(y) and crop sides widthwise(x) when less than the ratio. As it is now, when someone is looking at in in a long skinny browser, half the video gets cut off on the right rather than both sides being shrunk and centered on the middle. Alternatively I would like the whole thing to stretch in every direction and fit the browser, but I've also searched every page about that and none of the commands seem to work... I dunno maybe less has a new command, but I can't find it...
I am editing the .less file to accomplish what I need and almost all of the css commands seem to work except the one I need or at least, not anywhere I've tried putting it... still not sure what the difference between css and less is aside from newer/better. Here's what I have, it's the best I've found so far. it shrinks to the middle at least when it gets small:
// Background
#rt-top-surround {
position: relative;
video {
position: fixed;
width: auto;
height: 100%;
min-width: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; } these do nothing at all
-o-background-size: cover; } neither does background-size: 100%;
background-size: cover; }
.backface-visibility(hidden);
}
No matter what I do I can't stop it from preserving the aspect ratio. Any help for either full screen or centering the background video will do. Thanks in advance
-Scott
(I have only been teaching myself how to program websites over the last 2 days so I may not understand everything you say. Please keep that in mind. However, I did program and re-write a site from a template since then and I have been through every single file on ftp and read through the css just to learn what I can. I actually know a pretty decent amount)
You starters your CSS is invalid, #rt-top-surround isn't closed off so anything under that is broken.
// Background
#rt-top-surround {
position: relative;
} /* <------ here! */
As for background-size, this only applies to background-image not a video element. You can simply set width to whatever you want and because height:auto is applies be default it was scale with aspect ratio.
jsFiddle
HTML
<video>
<source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>
CSS
video {
width:100%;
}