How would one include an image on a website that behaves like the twitter users banner image which when you scroll one pixel it scrolls the page 2 pixels, moves the top of the image up one pixel and covers one pixel from the bottom of the image?
I don't know what to call this so I don't know how to search for it.
It is like the image moves up while the content behind it also slowly covers up the image like an extra layer of paper pushed up.
It's a form of parallax scrolling. There are plenty of good tutorials on parallax that I'm sure will help you achieve the effect you desire.
Related
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
http://1aproductions.ots-internet3.net
So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.
Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?
As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!
Thanks
Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)
I'm working with the Header Image Slider plugin for WordPress (which uses the Nivo Slider) and I can't seem to get the images to the size I need on a smaller screen.
I've looked around plenty and tried various things in my media queries like setting the max-width, but I can't put my finger on what the problem is. Each image is cutting off on the right-hand side. I'd like to get the images to roughly 708x245 on the next step-down. Any advice? Thanks!
My Site
Rather than me going into crazy detail with my question: Home Page Here
As the demo shows, when you resize the window, the images try to stay perfectly in the center of the container, as well as fitting the container without displaying the background.
I have one minor bug, if you resize the window vertically, it does ruin the proportions of the images by squishing them. I was wondering if anyone has any tricks to help this situation, or will I need to detect the image size compared to the window height vs proportions?
I was just trying to avoid a javascript layout.
i have a problem with my css layout. I have designed it with my resolution (1920x1080px) and it looks right. but if i resize the browser to simulate a smaller screen resolution i got a problem with my background images I cant handle to fix.
You can see my layout here:
http://www.lolers.de/design/
As you can see the corner images overlay the content.
I tried another layout technique with z-indexes which you can see here:
http://www.lolers.de/design/alternative/
but it overlays the top corner images which doesnt look good.
I already tried around for ours but cant get a solution.
Or is it possible to do such a background with css 3 features like canvas?
greets