7 replies [Last post]
epictreeclimber
epictreeclimber's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT+2
Joined: 2010-06-07
Posts: 15
Points: 19

Heya guys, could someone maybe explain to me what the transparent property does in this code snippet below. I really don't understand since the image is not transparent nor a background is shown. I have seen it at a lot of sites but don't have a clue.
thx in advance.
Johny

.lalala{
background: url("../images/bg.gif") repeat-x scroll left top transparent !important
}

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 34 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

transparent is the background

transparent is the background color.
So instead of using, say, #000000, you can use transparent and that element won't have a background color.
It's usually used for elements that have been specified to have a bg color at some point and with specificity you are negating that color so that way transparent GIF and PNG files can be truly transparent instead of still having a background color from the element.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

epictreeclimber
epictreeclimber's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT+2
Joined: 2010-06-07
Posts: 15
Points: 19

I see, but isn't it a bit odd

I see, but isn't it a bit odd do use this extra piece of code for non-transparant images?
I see it so often and am always thinking why on earth would they do that.
Thx m8 for your wickedly quick response! Cool

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 9 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's not for images; it's for

It's not for images; it's for background-color as Deuce already said. The code you've posted is the shorthand for combining

background-attachment
background-color
background-image
background-position
background-repeat

So no, it's not odd - it's for background-color, not background-image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

epictreeclimber
epictreeclimber's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT+2
Joined: 2010-06-07
Posts: 15
Points: 19

ok cool ty m8 for the

ok cool ty m8 for the response I am gonna check it out.
I think i now understand what you mean. If i get the box-model explanation of the w3schools.
the padding around the element is affected by the background. Almost sure this has something to do with it. but I am gonna test it out so I can fully master this weird browser depended language. Wink
I really appreciate the help
Thx!!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

epictreeclimber wrote: If i

epictreeclimber wrote:

If i get the box-model explanation of the w3schools.
the padding around the element

Padding is not "around" the element, it is within the element.

Most people, when the start CSS, seem to assume what you believe about padding, and I did too. But it's a mistaken assumption.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 34 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Margin is Around. Padding is

Margin is Around.
Padding is Within.

Add a Border to an img and you will see the different really easily.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

epictreeclimber
epictreeclimber's picture
Offline
Regular
Last seen: 4 years 13 weeks ago
Timezone: GMT+2
Joined: 2010-06-07
Posts: 15
Points: 19

Thanks guys!!

Thanks guys!!