How to create a static background

**cptrainer01** · 05-19-2011, 03:08 PM

I want to place a static background image that will fill the browser window and be centered. This is what the site looks like now.

How to create a static background-techsupportforbkgrd.jpg

I want it to look similar to this:

How to create a static background-oliver.jpg

**chrisatlemon** · 05-19-2011, 07:50 PM

a background like the examples you give is pretty easy to do. Basically it's just a one pixel wide image, top to bottom. Just specify it as a background for <body> and added repeat along the "x" axis. then specify a background colour which is the same colour where the image ends.

So in your example it goes from dark blue to light blue. The background colour sits below the background image. Where the image ends the background colour kicks in. If you give it the same colour as the last pixel (lowest) of the image then the transition between the image and the background colour will be seamless.

The CSS would look something like this:

body {
background: #09F url(images/background.gif) repeat-x;
}

cheers

Chris

**chrisatlemon** · 05-20-2011, 08:32 AM

good to hear it worked!

Usually you do not need to add "top centre" or "fixed". These are assumed. However without seeing the rest of your CSS I cannot really comment. The sample I posted was the cleanest and simplest way to do it in an empty CSS file. If you add a couple of rules and that works for you, that's fine. CSS always works as a whole, it's difficult to just paste in one line without knowing where it gets pasted and seeing the rest of the CSS. So you probably did the right thing

cheers

Chris

**cptrainer01** · 05-27-2011, 08:33 AM

Thanks Chrisatlemon. I'll try what you suggested. : )

**lelink** · 07-11-2011, 03:42 AM

good to know - i always wanted to change that at my site, but didn't dare to change css codes... thank you!

**Saranya** · 07-13-2011, 01:20 AM

Well explained about it.. Keep it sharing like this..

**nirma1230** · 08-02-2011, 11:21 PM

thank you sir to share such a great and help full information, i really like it and i find it very help full, keep it up

Thread: How to create a static background

LinkBack

Thread Tools

Search Thread

Display

How to create a static background

Re: How to create a static background

Re: How to create a static background

Re: How to create a static background

Re: How to create a static background

Re: How to create a static background

Re: How to create a static background

Tags for this Thread

Posting Permissions