Re: [css-d] Background-Image overrides background color
On Jan 11, 2015, at 2:02 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. it means study time See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. Matter of opinion Yucca, but I hear ya. For the level christopher is at it will do just fine getting him in line with how things on a basic level work. Did not mean to add to the confusion of W3Schools being WC3 itself. @Christopher, don't confuse W3Schools with WC3... Ok? They are not the same. One is lucifer and the other is God. There I uncontributed. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS and there you have it! a real contribution. is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yes. sorry not attributes, properties and NO don't go read them all that would be silly. That should read ... every css proplerty you need to so you... There. better? I'm trying here Yucca I really am man. Thank God for your technicalities! We all would be lost without them. :) Yucca Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yucca __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
I'm amazed it took this long for a link to the W3 validator to creep into the conversation. Maybe if we keep at it the list archives will trump w3schools in search results? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 11 January 2015 at 16:22, Tom Livingston tom...@gmail.com wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor On Sun, Jan 11, 2015 at 3:43 AM Karl DeSaulniers k...@designdrumm.com wrote: On Jan 11, 2015, at 2:02 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2015-01-11, 9:48, Karl DeSaulniers wrote: I would suggest a little trip to WC3. I wonder what that means. it means study time See here: http://www.w3schools.com/css/css_background.asp The w3schools site, unreliable and with rather low information/noise ratio, intentionally wants to be confused with the Word Wide Web Consortium, W3C. Please do not contribute to this confusion. Matter of opinion Yucca, but I hear ya. For the level christopher is at it will do just fine getting him in line with how things on a basic level work. Did not mean to add to the confusion of W3Schools being WC3 itself. @Christopher, don't confuse W3Schools with WC3... Ok? They are not the same. One is lucifer and the other is God. There I uncontributed. The W3C material on CSS is as authoritative as you can get in the area of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla Development Network material https://developer.mozilla.org/en-US/docs/Web/CSS and there you have it! a real contribution. is much more suitable as learning material. And it links to W3C material, so that you can check it too, after learning the basics and getting an idea of how various CSS features are used. I would suggest you google every css attribute you can so you familiarize yourself with it before using. There are no attributes in CSS. Googling every CSS property (which is what you are probably referring to) would be rather pointless. There are about 1,000 different properties in CSS specifications, drafts, and browser-specific documentation. Yes. sorry not attributes, properties and NO don't go read them all that would be silly. That should read ... every css proplerty you need to so you... There. better? I'm trying here Yucca I really am man. Thank God for your technicalities! We all would be lost without them. :) Yucca Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
w3school is at the top for so many searches. It would be great if they would just clean up their site. -- Registered Linux User: #480675 Registered Linux Machine: #408606 Linux since June 2005 On Sun, Jan 11, 2015 at 10:30 AM, Barney Carroll barney.carr...@gmail.com wrote: I'm amazed it took this long for a link to the W3 validator to creep into the conversation. Maybe if we keep at it the list archives will trump w3schools in search results? Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 11 January 2015 at 16:22, Tom Livingston tom...@gmail.com wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
Schoolboy errors, which indicate (to my mind) the level of care (or lack thereof) that went into the preparation of the material : Error Line 453, Column 88: did not start a character reference. ( probably should have been escaped as amp;.) …ancybar.net/ac/fancybar.js?zoneid=1502serve=C6ADVKEplacement=html5doctor id… ✉ Error Line 453, Column 102: did not start a character reference. ( probably should have been escaped as amp;.) Philip Taylor In a URL string like that, I personally would not look down on the dev for that. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
Tom Livingston wrote: In a URL string like that, I personally would not look down on the dev for that. We could debate this forever, Tom, and I suspect would never reach agreement. My position (with which you may well disagree) is that I look on it as being similar to a developer who elects to use (say) the Qt library in his/her work and then, when challenged that something does not work as it should, responds It's a bug in Qt. If a developer elects to use something from without his/her control, then it is his/her responsibility to ensure that it /does/ work as intended (i.e., in this case, validates). A bad workman blames his tools; a good workman chooses the correct tools and therefore never needs to try to ascribe blame. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: For someone at the OPs level, I'd not recommend a site with such a bad reputation. He won't know if what he is reading is correct. While that site may be improved as of late, why start learning at such a poorly regarded source. There are much more reputable places to learn the basics. Csstricks.com Moz sites Html5doctor I would personally treat with the greatest suspicion any site claiming to offer guidance on W3C standards that does not itself validate : http://validator.w3.org/check?uri=http://html5doctor.com/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
Tom Livingston wrote: It appears that the errors are for things that are not yet part of the spec the validator is based on. I would not call that bad code. Schoolboy errors, which indicate (to my mind) the level of care (or lack thereof) that went into the preparation of the material : Error Line 453, Column 88: did not start a character reference. ( probably should have been escaped as amp;.) …ancybar.net/ac/fancybar.js?zoneid=1502serve=C6ADVKEplacement=html5doctor id… ✉ Error Line 453, Column 102: did not start a character reference. ( probably should have been escaped as amp;.) Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
On Sun, Jan 11, 2015 at 12:24 PM, Philip Taylor p.tay...@rhul.ac.uk wrote: Tom Livingston wrote: In a URL string like that, I personally would not look down on the dev for that. We could debate this forever, Tom, and I suspect would never reach agreement. My position (with which you may well disagree) is that I look on it as being similar to a developer who elects to use (say) the Qt library in his/her work and then, when challenged that something does not work as it should, responds It's a bug in Qt. If a developer elects to use something from without his/her control, then it is his/her responsibility to ensure that it /does/ work as intended (i.e., in this case, validates). A bad workman blames his tools; a good workman chooses the correct tools and therefore never needs to try to ascribe blame. Philip Taylor I'll agree to disagree with you. While I agree your code should validate, there are *some* things that can be overlooked. It's been said many time on this list. It's like vendor prefixes or zoom:1; in the CSS validator. It's an error, but if you know why it's an error and know it's there on purpose, you can let it go. I'm not saying you are wrong, Philip. I'm just a little more lenient. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
Try making the background color the last item in the list. On Sat, Jan 10, 2015 at 11:59 PM, Crest Christopher crestchristop...@gmail.com wrote: The background image should sit on-top of the background color, instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Christopher __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] Background-Image overrides background color
The background image should sit on-top of the background color, instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Christopher __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
2015-01-11, 6:59, Crest Christopher wrote: The background image should sit on-top of the background color, Yes, if both are specified. instead the background color is overriding my background image ? background-color:#343630;/*#b7b7b7;*/ background:url(/wdp/wip/overlay_bg.png); background-position:top; background-blend-mode: overlay; margin:0; padding:0; font:100%/1.3 arial, helvetica, sans-serif; Can you please provide a complete example? This code can hardly produce the effect described. The background shorthand sets background-color to transparent, so there is either the background image alone or, if it does not exist, no background, i.e. the enclosing element’s background will shine thru. If you replace background by background-image, the situation changes. Then, if the image exists, it will be blended with the background color, as specified by background-blend-mode: overlay (on supporting browsers). Yucca __ css-discuss [css-d@lists.css-discuss.org] 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] Background-Image overrides background color
I would suggest a little trip to WC3. You have posted this a lot. it should be background-image: if your just setting the url attribute to your background image. background: if your setting the url, position, size, origin, color, etc as the shorthand notation. See here: http://www.w3schools.com/css/css_background.asp I would suggest you google every css attribute you can so you familiarize yourself with it before using. That's what I did. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jan 10, 2015, at 10:59 PM, Crest Christopher crestchristop...@gmail.com wrote: background:url(/wdp/wip/overlay_bg.png); __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Wed, Jun 19, 2013 at 10:58 AM, COM j...@coffeeonmars.com wrote: On Jun 18, 2013, at 6:38 PM, David Laakso laakso.davi...@gmail.com wrote: Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Thank you..this is good to hear. Let me make sure I expressed my request clearly when I say on top..picture a header 960x100px which has a background image. imagine that same header with a color applied to the entire 960x100px dimension as opposed to: a header with a background image and a background color above it in the sense of closer to the top edge of the view port. I fiddled yesterday and got nothing other than I can vary the opacity of my color but not so that the background image's color is affected by that of the color above it (above it in z-space) Thank you! JOhn John, For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. Transparency is determined by the code but it is dependent on the hue, saturation, value of the elements proper-- their z-index, the type of monitor used to view the page, ambient light when viewed... and god only knows what else. For what its worth this is a site in progress that uses various combinations of svg images, linear-gradients, and rgba-transparency in the header, navigation, sidebar, and footer: http://ccstudi.com/ Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
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] background image AND background color?
Tested on safari 6.0.5...
background-color: rgba(240,0,0,0.4);
althought it looks like rgba(240,0,0,0.2) might be better suited. :)
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
On Jun 19, 2013, at 12:17 PM, David Laakso wrote:
On Wed, Jun 19, 2013 at 11:51 AM, COM j...@coffeeonmars.com wrote:
On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote:
For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.
A link to the page in question is here:
http://coffeeonmars.com/test/flextest/flextest.html
the part I'm talking about is at top, where it says heading one and
heading two; behind them in the header is a jpg of what looks like some
light texture. in the css is also a background color for that element: a red
at 0.4 alpha.
my goal is to have the texture image's color influenced by that background
color, IOW, by varying the opacity of the color, the image would have more
or less of a reddish cast to it.
Thank you!
John
John,
rgba coding error...
Change this:
header{
background-color:rgba(240,0,0 0.4);
}
to this:
header{
background-color:rgba(240,0,0,.04);
}
or this:
header{
background-color:rgba(240,0,0,.4);
}
Note the last comma.
Not tested.
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
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/
__
css-discuss [css-d@lists.css-discuss.org]
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] background image AND background color?
On Jun 19, 2013, at 10:31 AM, Karl DeSaulniers k...@designdrumm.com wrote: Tested on safari 6.0.5... background-color: rgba(240,0,0,0.4); althought it looks like rgba(240,0,0,0.2) might be better suited. :) weird…no change for me at all, tho when I refresh, I do see the reduced-opacity red flash for just a second, right before the .jpg loads….. John __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
Sorry Tom L. Sent this to you instead of the list. Anyway, you need an overlay div if you're trying to simulate layers. Makes for css that is easier to read, in my opinion. Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Wednesday, June 19, 2013 10:36 AM To: COM Cc: CSS-Discuss Subject: Re: [css-d] background image AND background color? You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. HTH — Sent from Mailbox for iPhone On Wed, Jun 19, 2013 at 11:54 AM, COM j...@coffeeonmars.com wrote: On Jun 19, 2013, at 8:37 AM, David Laakso laakso.davi...@gmail.com wrote: For those among us who dwell in the visual world, one picture is worth a thousand words... a click able link to your coded page would help. A link to the page in question is here: http://coffeeonmars.com/test/flextest/flextest.html the part I'm talking about is at top, where it says heading one and heading two; behind them in the header is a jpg of what looks like some light texture. in the css is also a background color for that element: a red at 0.4 alpha. my goal is to have the texture image's color influenced by that background color, IOW, by varying the opacity of the color, the image would have more or less of a reddish cast to it. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Wed, Jun 19, 2013 at 1:46 PM, COM j...@coffeeonmars.com wrote: confirmed…here's what worked for me./.. To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html John The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
On Jun 19, 2013, at 11:43 AM, David Laakso laakso.davi...@gmail.com wrote: The red-like color is opaque: no texture whatsoever seen in Windows 7 any browser. well that blows a hole right through that technique..thank you for telling me that, David. John __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
You have to set up a special alpha CSS for IE. Also you may need PNG fix for it to work in IE older browsers, but it can be done. just search for transparency in IE and PNG fix for IE HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 19, 2013, at 12:46 PM, COM wrote: On Jun 19, 2013, at 10:35 AM, Tom Livingston tom...@gmail.com wrote: You won't get PhotoShop multiply layer effects exactly, but using a 24bit png for your image with areas of alpha transparency to allow the bg color to come through is as close as u can get I believe. confirmed…here's what worked for me, aside from David and Karl's correction of my code: To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% just for grins and NOW the influence of that red is taking effect on the PNG texture occupying the same element. link:http://coffeeonmars.com/test/flextest/flextest.html weird…my connection shows the red load first and then s-l-o-w-l-y replace by the texture.. Thank you for the code corrections and ideas about png/opacity Spoze the CSS consortium is considering giving us some photoshop-like layers? Compared to the many other effects CSS is now handling, it doesn't seem far-fetched.. John __ css-discuss [css-d@lists.css-discuss.org] 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/ __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] background image AND background color?
Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] 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] background image AND background color?
Background: #cco url('image.png') 0 0 no-repeat;
—
Sent from Mailbox for iPhone
On Tue, Jun 18, 2013 at 8:22 PM, COM j...@coffeeonmars.com wrote:
Fiddling with trying to combine a background image with background color
applied to the same element and hoping to vary either one or both opacity.
Is this possible to do…I guess what I'm looking for is to do with CSS, images
and color what you can do with Photoshop layers.
Thank you!
John
__
css-discuss [css-d@lists.css-discuss.org]
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/
__
css-discuss [css-d@lists.css-discuss.org]
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] background image AND background color?
On Tue, Jun 18, 2013 at 8:22 PM, COM j...@coffeeonmars.com wrote: Fiddling with trying to combine a background image with background color applied to the same element and hoping to vary either one or both opacity. Is this possible to do…I guess what I'm looking for is to do with CSS, images and color what you can do with Photoshop layers. Thank you! John Anything is possible. Scalable Vector Graphics [svg images], CSS rgba transparency, and CSS linear-gradients --among other contemporary methods ... open a lot of new doors and windows that do not require PhotoShop. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] 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/
[css-d] background-image and background-color question
Hi All,
The background image on this page -
http://www.cargovango.com/misc_equip.htm - is 2000px high and repeats at
the bottom of the page. I have removed the top 108px and set a new
repeating background that only contains the vertical lines.
My question is can I combine the header image with the solid gray such
that the solid gray only appears at the top of the page? I know I'm
constrained by the pageDef width but wonder if there is another way.
Thank you!
Tim
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #FF;
color : #00;
height: 100%;
font-size: 12px;
background-image: url(../images/bg2.gif);
background-repeat: repeat;
}
#pageDef {
width: 700px;
background-color: #FF;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
body
div id=pageDef
div style=background-color:#CC;border-bottom:solid 1px
#00;margin:0;width:700px;
img src=/images/header.gif width=700 height=108
alt=www.CargoVanGo.com /
/div
div id=content
hr noshade=noshade /
!-- #include virtual=/includes/rightContent.aspx --
div id=contentPad
div id=pageTitleEquipment For Sale/div
... etc ...
__
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] background-image and background-color question
Big Moxy wrote: http://www.cargovango.com/misc_equip.htm My question is can I combine the header image with the solid gray such that the solid gray only appears at the top of the page? I know I'm constrained by the pageDef width but wonder if there is another way. Tim Would it be best to begin here?: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.cargovango.com%2Fmisc_equip.htm Regards, ~dL __ 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] background-image and background-color question
David, I didn't create the current site and want to distance myself as much as possible from it. I am converting it to .NET and making significant CSS changes too. Tim David Laakso wrote: Big Moxy wrote: http://www.cargovango.com/misc_equip.htm My question is can I combine the header image with the solid gray such that the solid gray only appears at the top of the page? I know I'm constrained by the pageDef width but wonder if there is another way. Tim Would it be best to begin here?: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.cargovango.com%2Fmisc_equip.htm Regards, ~dL __ 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] background-image and background-color question
Big Moxy wrote: My question is can I combine the header image with the solid gray such that the solid gray only appears at the top of the page? I know I'm constrained by the pageDef width but wonder if there is another way. Only by adding another container that stretches with the page-content and fills the body, and set the gray background-image on that without repeating it vertically. Multiple (CSS) backgrounds would also solve it, but support isn't good enough for practical use yet. 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] background-image and background-color question
On Feb 5, 2008, at 12:03 PM, Big Moxy wrote:
My question is can I combine the header image with the solid gray such
that the solid gray only appears at the top of the page? I know I'm
constrained by the pageDef width but wonder if there is another way.
html {background: #ccc url(./stripped-png) repeat 50% 0;}
body {background: transparent url(./flat-grey-with-a bottom-
border.gif) repeat-x 50% 0;}
stripped.gif is a fragment of your current background-image, can be as
small as 10px by 10px, covers the whole viewport/document.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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/
