Re: [css-d] what is transparent url
Rob freeman wrote: hello everyone, I have come across a few sites that have code: background:transparent url(/img/filename.gif) What is the transparent element for? The 'background' property is short for both 'background-color' and 'background-image', so such a declaration says s/he wants a transparent background-color behind the background-image. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] what is transparent url
but why declare this? isnt this set as a default.. 2008/5/31 Gunlaug Sørtun [EMAIL PROTECTED]: Rob freeman wrote: hello everyone, I have come across a few sites that have code: background:transparent url(/img/filename.gif) What is the transparent element for? The 'background' property is short for both 'background-color' and 'background-image', so such a declaration says s/he wants a transparent background-color behind the background-image. regards Georg -- http://www.gunlaug.no -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] what is transparent url
Rob freeman wrote: but why declare this? isnt this set as a default.. Yes, it is - or at least should be. No harm in spelling it out though, and I do so routinely. In some cases a set of stylesheets includes reset styles that contain colored background, and other times certain elements are given basic styles early on that also contain background-color. By routinely declaring 'background-color' along with 'background-image' even if it's a repetition of default, I don't have to care about what's styled earlier since I'm overriding it anyway. This is of course of most use when I debug and/or alter what others have created, and I can't count how many times such a complete styling approach has solved problems and saved time - not only when it comes to 'background'. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] What is transparent url
background: transparent url(filename).
This is a shorthand method for writing CSS rules. This rule has
multiple values, that are space-separated. The first value sets the
background color to transparent; the second value is the server path or
URL where the browser can find the image.
The same rule can also be expressed like this:
.class-name {
background-color: transparent;
background-image: url(/path/to/images/filename.png);
}
Again, specifying these background attributes in one rule is just a
shortcut.
Another example:
/* shorthand */
.class-name {
background: url(/path/to/images/filename.png) repeat-x top;
}
/* longhand */
.class-name {
background-image: url(/path/to/images/filename.png);
background-repeat: repeat-x;
background-position: top;
}
Hope that makes sense. More info is in the CSS [2.1] spec:
http://www.w3.org/TR/CSS21/colors.html#background-properties
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] What is transparent url
background: transparent url(filename). That's shorthand. Transparent is the background color, the url is the path to the background image. In longhand it's: background-color: transparent; background-image: url(filename); -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is transparent url
background: transparent url(filename). It's a shortcut of: background-color: transparent; background-image: url(filename); -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is transparent url
Tek wrote: I am just learning css and I have been working with adding a background image to a cell. well really I'm reading eric meyer on css and I find css that reads: background: transparent url(filename). When I do this in Dreamweaver the code doesn't show this tranparent url. Can someone explain why that is there and whether or not it's significant. I tried a search engine and it just kept bringing up code examples without explainations. and up to this point none of my books have this. Thanks in advance. Hi, It's not really transparent url, but you could think of it as transparent, url(...). What you are seeing is the shorthand way to declare all the background properties. Transparent is the background color, or in this case, no background color. That could also be, for example: red url(filename). The url(filename) refers to the background image location. Another way to write this would be: background-color: transparent; background-image: url(filename); It's always a good idea to define some sort of background color when using an image so if the browser can't find the image, it will return the color instead. This could become a problem if you had something like a black background image and white text. If the black background image couldn't be found, the browser would by default return a transparent background, and if the the element under it was white, then the user wouldn't be able to see the text. Hopefully I didn't confuse you anymore . :-) If I did, let me know and I will try to clarify. Hope this helps, Matthew __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is transparent url
On 8/5/05, Tek [EMAIL PROTECTED] wrote: I am just learning css and I have been working with adding a background image to a cell. well really I'm reading eric meyer on css and I find css that reads: background: transparent url(filename). When I do this in Dreamweaver the code doesn't show this tranparent url. Can someone explain why that is there and whether or not it's significant. I tried a search engine and it just kept bringing up code examples without explainations. and up to this point none of my books have this. Usually you should provide a fallback background colour should the image filename not be available. transparent means that the fallback background colour should be the one of the parent element. This is rather redundant, but necessary for the CSS to validate. A better option is to use a real colour: background: #fff url(foo.gif); -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] What is transparent url
Despite 5 people saying it, this is actually technically incorrect, and the difference (although minor) is probably worth pointing out. Indeed and glad you've clarified. But for someone just beginning to learn CSS, would it help to distill it down to: But be careful with using shorthand rules because it may set values on properties that you did not intend. Start out by being very specific in your CSS rules and as you get more experience, use the shortcuts, if you wish. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
