CSS background

[Grafight]

Can someone explain on how i can do a cool background with css...something like this http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/

I want a background image with the middle white/transparent...

 

[smoovo]

If you are meaning to the page background, it's a 1px height with width of almost 1,200px and it has style of repeat-y.

body {background:url('images/bg.jpg') repeat-y;}

But if you are talking about the "page holder", the one in the middle with all the content, it can be a 1px on 1px PNG file with transparent, and it has style of repeat.

<div style="background:url('images/bg.png') repeat;">My Content</div>

You should add sizes, margins, borders and more...

- Enjoy!

 

[Grafight]

i would put the page holder in my css as well and include everything inside the body in it?

 

[PixelPusher]

i would put the page holder in my css as well and include everything inside the body in it?

Yes.
Referencing the Dynamix Labs site:

The body will have a background property that sets the repeating orange tones.
(smoovo provided the css below)

The page container or content holder element will have a background property that uses a translucent white image.
(this css also provided by smoovo, and image recommendation is good)

Optional
You could use the css2 opacity property to change a solid white background to semi-transparent. Then no image will be needed at all.

NOTE: This method will require you to use the filter property for IE. Here is an example:

div.container {
background-color:#fff;
opacity:0.85;
filter:alpha(opacity=85);
}

 

[smoovo]

Yes, except things like the tube on the background and stuff around it... The tube could be a div with a absolute positioning and lower z-index than the page holder.

So basically everything else, all the content, are inside the page holder.

- Enjoy!