Two backgrounds – CSS elements
As some of you know, in the forthcoming CSS 3.0 there will be tons of great improvements, including diagonal-writing, round edges through code and up to 8 background images for an element. This is fantastic but so far we cannot use these goodies and have to overcome the difficulties by hand.
Today I had to improve my company’s corporate blog comments.php. In the process I had to apply two background images to my comments block, but this appeared to be not so smooth. Of course, I consulted with many sites and the options varied from nested elements to empty div classes (God forbid…). In the end I decided to try with inline-css coding. I post my solution here so that it gives yet another alternative to the ones that has been posted already. I will be glad if you have suggestions for improvements.
I had classes with background applied to my comments. my li attribute is altered through CSS for the comments section only. Then I have a class from an additional picture. The only option that I had left was using a inline code for the new paragraph element. Here is the code (in my case…of course that it is different in the different cases)
<p style=”padding: 20px 0px; background: url(http://yoursite/image.gif) bottom no-repeat;>”
Some of you may even specify it as a class in their styles.css file but in my cases this was not an option.
good article as usual!
Thank you