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.
Related
The problem image
I am working on a page with a fixed header that has transparent background. And i need to make the content below it somehow when scrolled under this fixed header disappear like how it would act if the header was non-transparent.
EDIT:
Fixed it by adding the same background to the transparent fixed element as the body and by adding properties
background-position: center top;
background-size: cover;
indeed, setting a background on the header with the background-position attribute works but I think it would be slightly better in your case to fix the rest of the content in place and set its overflow to scroll
I'm creating a one page website with an image that covers the entire background (and stretches proportionally with the window). For this I'm using a "background-size: cover;"
Now, when I'm resizing the window to the smallest size it let's me, the background image seems to anchor to the default top left corner.
Is there any way for me to change the anchoring location to top right?
try change your css code to be like this:
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
Here the demo: http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
I've been baffled by a CSS issue with a fixed header, so I'll just jump into it.
Basically I'm using the same image fixed position for both the header and a div in the body, to make it look like a seamless background. Then as you scroll down, the content in the div goes under the transparent header. But something is going wrong once I scroll past the end of the div with the background image. I've played with z-index, but Chrome/Safari doesn't seem to like that. (I can only imagine how IE would handle this). Works as intended for me on Firefox 16.
Anyways, the site itself is at www.meeker.io. Any help in the right direction is greatly appreciated.
try changing your css:
.topBar {
background: url(bgRailsColor3.png) no-repeat top left;
}
.rails {
background: url(bgRailsColor3.png) no-repeat top left fixed;
}
I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.
The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net
Mockup
img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg
Backgrounds
img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg
Note: The backgrounds are 1200x400 each.
EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..
UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.
You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.
The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...
body {
background: #DDD url('2.png') no-repeat center bottom;
}
.container {
background: url('1.png') no-repeat center top;
}
Another thing you can do is set a background image on the body and on html.
body {
background: url(...);
}
html {
background: url(...);
}
You can see jqueryui.com for an example of this.
What you can do:
The menu is a div with an own background to fit the upper area.
Then apply the background with the bottom part to the body or content/page container that you are using.
It sounds like you want:
html
{
background: url(...) no-repeat top; /* see the background-position property */
}
body
{
background: url(...) no-repeat bottom;
}
you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.
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.