I am trying to get the effect of moving background image on a section like in below website.
Just about the footer when you scroll up and down the image behind "FIND A CHIPOTLE" scrolls and moves. I am not able to achieve the desired effect.
Please help.
You can do it using CSS:
background-attachment: fixed;
The body of the page has a background image. Most of the divs above it have a white background, but the one where you can see the image scrolling has "background: transparent;" which allows you to see the image attached to the page body. It's not the image itself that is scrolling but the divs above it.
Related
I'm looking for either a plug-in or pure JS/Jquery solution for a scrolling animation.
Basically when users scrolls to a certain section, and continues scrolling, the background of that section stays still while text and images fade in and out (on top of that static background) as user scrolls.
It's similar to this website: http://www.bagigia.com/ scroll down to "designer" "the idea", you'll get a good idea of what I'm trying to accomplish.
You can do it with just css
body {
background-attachment: fixed;
}
I'm trying to get my background to scroll with content and stick to the top of the page. My background is in a fixed position under my header.
Here's an example http://www.crunchyroll.com/
is there a way to do it in css? I'm fairly new to javascript but want to see if it can be done in css if not then I'll try it in javascript.
Add the following style:
background-attachment: scroll;
This will change the background attachment to the default fixed to scroll so that it scrolls with the page rather than being stuck in one position.
Here's a working example on JSFiddle.net.
I know using sprites will fix this issue, is there some other better way?
Some browsers loads hover image until you hover on it. It is really noticeable if the image is large or traffic is slow.
Ideally, you want to use Sprites image, and position them when you hover.
Like this http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b
Pre-load images to dummy div like this -
#temp
{
background-image: url(/images/image1.png);
background-image: url(/images/image2.png);
background-image: url(/images/image3.png);
}
How about adding the image to be changed on html page and display it none with inline css so that it gets loaded when the html page is rendered, and with javascript change image on hover.
I have this div block which shows a preview image to a video (YouTube), the problem is that this preview thumbnail generated by CMS, it doesn't give the YouTube play icon in the middle of it, so it doesn't look like a video, but just a plain image.
So I came up with a solution (top answer CSS show div background image on top of other contained elements), by adding an empty span and giving it a background, that YouTube play icon and position absolute and positioning it in the middle of that image preview thumbnail. All looks great, now the problem is that background is not a link, the thumbnail is a link to the video, so that transparent icon hides the thumbnail link below it.
According to this post:
Click through a div to underlying elements
It works, if you add the following CSS attribute:
pointer-events: none;
Here is also a post about the IE compatibility: fromanegg
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.