HTML: Background image of website should not scroll with the rest of the page
Question by Compi | 2012-06-02 at 11:11
I would like to have a background image at the top of my homepage, which does not disappear when scrolling down, but almost remains on the top side of the browser.
In other words, the content of the website should be able to scroll over the background away and the image in the background should remain static always standing in the same position.
Is there a way to do that somehow?
Related Topics
How to resize Image before Upload in Browser
Tutorial | 13 Comments
HTML5: Upload Images with Client Side Resize
Tutorial | 9 Comments
Mouseover buttons using CSS without reloading
Tutorial | 0 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
jQuery: Scroll up and down with and without JavaScript
Tip | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
Just use the following CSS to implement your plan:
The property "fixed" provides the effect that you want. The "repeat-x" is favorable at this point, if you have an image that should be repeated across the top of the page from left to right (for example, a shadow or something similar). If you would like to have only one image without repetition, you have to omit the "repeat-x" or you can use another "background-repeat".
Example: the website sttmedia.com is using exactly the code above with "repeat-x" and "fixed". There, you can see how this is looking like.
2012-06-03 at 04:40