Two columns Three columns Mixed cols and rows Gallery Archives Clean & Clear Dark or Black High Contrast/ Impact Blog Designs New Corporate/ Professional Unconventional Designs Liquid layouts Web Design Firms Our Favorites What's Popular Last 20 submissions
Horizontal Menus Vertical Menus Multiple/ Nested Levels

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">

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

</style>

Comments (20)

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

#1: Agny on 08/30 at 08:24 PM

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

#2: mals sy on 12/08 at 10:29 AM

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 09:04 AM

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.
http://tentonweb.com/
Jacksonville, Florida USA

#4: Jim S. on 12/15 at 10:41 PM

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.

Pink[panther
New Zealand-Porirua

#5: Pinkpanther on 03/05 at 08:17 AM

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 07:57 AM

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

#7: Doyox on 04/29 at 07: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 09:17 AM

can u fixed it

#9: pierre on 09/25 at 01: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 05:42 PM

Post a Comment: Guest (Login or Register)

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below:


CSS Forums

CSS Forums: latest threads Last Post Info
Cant design (1) 05/16/2008 12:28 pm
By: tarik
How to show an entire pdf in one div (2) 05/14/2008 11:07 am
By: Grundic
Starting A Web Design Business - How Do I Attract Customers? (10) 05/13/2008 02:37 pm
By: april
Download.. Pacific Wings multicolor menu (1) 05/13/2008 03:05 am
By: sebreh
Check out this website I am working on CRITIQUE. (5) 05/13/2008 01:20 am
By: abran