I have a webpage with a static CSS background, but the content is longer than the height of the image. This causes whitespace at the bottom after the image ends.
How can I make the image scroll along with the view of the user's screen?
background-attachment: fixed;
See http://meyerweb.com/eric/css/edge/complexspiral/demo.html for a more detailed example.
Related
I have a sidebar navigation, and I'm trying to center an image in the main content (everything but the sidebar), but nothing I try works.
How can I center an image in the main content of my site, while having a fixed sidebar, where the image will stay centered even if I resize the page (make the site full screen, or half screen, etc.)?
You can try to set these styles for the image:
display:block;
margin:0 auto;
When I add a background image to a div, the following div scrolls past the image, creating a cool parallax effect.
However, this only works when the background attachment is fixed. But in fixed position I cannot get the background image size to "cover" or "contain" the div without the image disappearing or resizing too large.
The only solution I found was to use repeat, which I don't want to do. I've also played around with background-position but that doesn't seem to work either, the image sometimes disappears or isn't in the same place across browsers
.imgContainer{
height:250px;
border-top-right-radius:inherit;
border-top-left-radius:inherit;
background-repeat:no-repeat;
background-image: url('test.jpg');
background-size: cover;
background-attachment: fixed; /*If I remove this the image fills the div approriately, but the div below it doesn't scroll over it. */
}
HTML
<div class="content">
<div class="imgContainer">
</div> <!--ends imageContainer -->
<div class="contentPosts">
Content goes here and should scroll above the image rather than push it up
</div>
Use a JavaScript library Skrollr.js, you will have a great control of your animations and the timing.
Check our these two tutorials to get you started with Skrollr:
Simple parallax scrolling tutorial
How to create a parallax scrolling website
So, I made a gradient image for the background of my site and since it didn't have much detail I figured I would take the image and use background-image and stuff with CSS to stretch it out over the page. However, the image refuses to stretch vertically the correct way. I can get it to stretch horizontally just fine, but no matter what I do, it will not stretch vertically to 100% on the page, and instead it limits itself to the content on the page, which I do not want. The only way I can get the picture to stretch horizontally without dead-setting the pixel length is by using cover, but then it becomes too tall. Can anyone give me a piece of code I can use to expand the image to fit the page horizontally and vertically? Because it refuses to and I don't know why
This is the CSS code I have in my style tags in the head
body {
background: url('Background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
For starters background-repeat is set to no-repeat.
You need to make the body fill the browser no matter how much content it contains or it will only repeat as far as the content.
Edit:
Make the page fill the browser winder no matter what the content.
html, body { height: 100%;}
I have a background image which seems to be static on my website and when I scroll down it keeps scrolling with the page... I want the top to stay static and then when I scroll down for the rest of the page to appear as #FFFFFF...
html, body{background:#ffffff url(images/background-repx.png) repeat-x;height:100%;min-height:100%;}
Any ideas how to do this, I'm not familiar with CSS backgrounds.
Thanks in advance
- Hyflex
Try
background:#000000 url(<img>) no-repeat scroll center top;
To see this effect, using chrome, change the css to:
background:#FFFFFF url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.
I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website
First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.