Stasiuk's Universe --Creating a Web Site: Backgrounds and Transparency

Backgrounds

Seemless backgrounds are easy to implement and they load fast! Click on the backgrounds…

I made these along time ago… using my Amiga and a program called ImageFX… They tile without visible edges. The first one is "embossed", a nice watermark effect!

If you use the .gif file format you can animate your background (animation is one of the capabilities of the .gif file format…) I found this twinkle star pattern on the web and use it for my home portal page, yep who can resist twinkling stars!

You can find many "free" and "Royalty Free" seamless backgrounds on the web.

Just search using the following key words free seamless web page backgrounds

You use CSS to place the backgrounds (Yes you can have more than one background on a page!)

with a declaration in the body selector … you can also put backgrounds in divs, paragraphs, etc.,

body { background-image: url("images/darkpattern.png"); }

div { background-image: url("images/foo.png"), url("images/bar.png"); }

p { background-image: none; }

Full Page Backgrounds

In The "Wrapper"

On my Astronomy Class Portal Page I placed a "full" image in the background in the div "wrapper" I wanted to use an image that would fire up your imagination, but to "see" the image the aside and section content areas had to be transparent…

#wrapper {
position: relative;
background-image: url(images/wrap-bak3.jpg);
margin: 10px auto 0 auto;
width: 1024px;
height: 768px;
}

aside {
color: #000;
background-color: #fff;

/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

section {
color: #000;
background-color: #FFF;
margin: 0 30px 0 5px;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

Straight forward stuff. There is a usability issue here… this concepts works as long as the text is readable!

Image Backgrounds Beyond the Wrapper…

For the first revision of my Curling website way back when (5-6 Years ago) I made a background that looked like this

I made it 1650 x 1050 pixels

Bg2

In a browser it looked like this… sorta I don't have the old css for the <header> easily accessible, but you get the idea…

Layout002

To position the graphic I used a background-position declaration for the background image…

body {
color: black;
background-image: url(/images_global/bg2.jpg);
background-repeat: repeat-y;
background-position: center top;
font-family: Tahoma, Arial, sans-serif;
margin: 0px;
padding: 0px;
}