Transparent backgrounds

[cygnus]

Cygnus here,

So, I'm finally getting to the point where I'm getting a loose handle on CSS. My website still in its rough stages, but it's starting to take shape. I'm experimenting with things more than anything. Trial and error, for me at least, is the best way to learn.

Anyway, can someone here teach me how to make a column transparent?

[tommylogic]

background: none;

[cygnus]

What about translucent?

[tommylogic]

transparency isn't supported in CSS 2.1 it will be hopefully in CSS 3

the workaround involves using an alpha transparent PNG overlay and an IE Fix (because IE won't display it properly). The fix can be a CSS conditional comment and/or a JS such as jQuery png fix

on my page (top right image), I use a PNG-32 with alpha transparency & overlay it on the image's div via a class selector

.headermask {
    width: 602px;
    display: block;
    background: url(../images/header-mask.png) no-repeat left center;
    height: 125px;
    position: absolute;
    top: 0;
    right: -1px;
}

[Rexibit]

Great advice Tommy. :)

PNG is the current "and best" way to get transparency at small file sizes. GIF use to be used to get a similar effect, but does have issues with being of a larger size.

If you are wanting the image to stretch to fix the contents of your DIV, you will need to make the image background repeat along the Y-Axis. This will allow you to make an image, usually 10px or so high, move down the page as the DIV grows.

[likethegoddess]

Yep, png is the way to go. CSS3 supports specing transparent backgrounds within your style sheet, but CSS3 isn't universally supported at this point.

Just remember that transparent pngs aren't supported by IE 6 and earlier. You'll need some code your head tags to work around it like the following. Unfortunately, the submission process clears out the code when I try to post an example. I've used a workaround at my site, Graphic and Web Design Services - like the goddess. Look for "if lte IE 6" statement.

Hope this helps.

Diana

[tommylogic]

^^ she meant ^^

<!--[if lte IE 6]>
<style>
#comments {background-image: none}
#contact {height: 85px; background-image: none;}
</style>
<![endif]-->

[cygnus]

Help! Please help me! :(

I feel like a total idiot, but I can't help it anymore. I'm either not reading into this enough, or too much. Either way, I can't take it anymore and I need help!

My syntax sucks.

I'm trying to add just a simple background for my site, and I can't do it. I want it to cover the whole background which it does wonderfully. However, no matter what I do, or how many times I try to get it right, it won't work.

What is wrong with my syntax?




!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
head>
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
title>earthdrift

body {
background-color: #FFFFFF
background-image: url (image.jpg);
}

/head>
body>

edit: I had to leave out the first tag of each line because it wasn't being read correctly.

[tommylogic]

Originally Posted by cygnus

I want it to cover the whole background which it does wonderfully. However... it won't work.

I'm confused.. it works wonderfully, but it doesn't??? Which is it? If you have a link to the actual site, I might be able to help, but i can't tell from the limited code you posted.

[cygnus]

Yeah, I kinda thought I didn't phrase that very well. Let me rephrase.

I've been fooling around with it, trying to get my background to work. It works in straight HTML, but not CSS. Everytime I try to work it out in CSS, it goes fubar, and the image can't be seen.