CSS Examples Fixed and centered background image

Date: 09/06/2004 Fixed and centered background image

Author: CSS Drive

This example demonstrates using CSS to create a watermark background image for the page, whereby the image is centered and non repeating.

Example: n/a.

CSS Source Code:

<style type="text/css">

background: url(background.gif) white center no-repeat fixed;


Comments (26)

Super nice, super easy, super good looking. Just wanted to tell you in case you don't know ;). Thanks!

#1: Agny on 08/31 at 12:24 AM

hi just want to try how this thing would work..

#2: mals sy on 12/08 at 03:29 PM

looks delicious
vut it seems like I'm too stupid to correctly insert the image url :|
what is the correct way ? [/embarrass mode]

#3: Guest on 12/15 at 02:04 PM

from my web site:

background: #fff url(/img/bg_bigtt.jpg) 30% 50% no-repeat fixed;

or for centered

background: #fff url(/img/bg_bigtt.jpg) center no-repeat fixed;

the forward slash in the image path ensures that it will map correctly to the proper file/folder regardless of where it is called from. And just out of habit I always declare the bg color 1st but according to the example given here apparently it doesn't matter.

Thank you,
Jim S.
Jacksonville, Florida USA

#4: Jim S. on 12/16 at 03:41 AM

Just a semi related issue:

I've got a css code(page) that enables the bg image to be 'expandable' ie fits all screen sizes.

I have also got a page that has all the relevant css codes for menu links etc.

The prob is that the 2 pages of are incompatible(?).

The first page does'nt have the Doc type specified at the top at all,the second page needs the doctype specified- when I insert the relevant code from first page it does'nt seem to display the bg image at all.

So,to simplify..

I need the bg image code(from 1st page)inserted into the 2nd page that has the doctype specified-by doing this it throws a hoofy(!?) no image is displayed.

New Zealand-Porirua

#5: Pinkpanther on 03/05 at 01:17 PM

can help me to insert custom cursor??
i can get the url, and insert it to my friendster, but it have no effect....

#6: Doni on 03/27 at 12:57 PM

This is good places to create faboulous web...such a good places

#7: Doyox on 04/29 at 11:43 AM

You can't insert a custom cursor unless the .cur file is in the same directory as the page you're trying to use. At least I haven't seen it work otherwise...

I use a custom cursor for our studio's website, but again the .cur file's in the web root.

#8: Marc on 06/29 at 01:17 PM

can u fixed it

#9: pierre on 09/25 at 05:04 AM

please..I just wanna know how to fix my css profile, my problem is after I change my profile name, my customize profile are lost,and I tried many time to save my layout code to my css it was saving but it's not showing up to my porfile and I refresh it twise still not showing up...any Ideas??

#10: pia on 09/27 at 09:42 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site