I just wanted to share a very quick tip with you that I’ve recently used and was surprised to see worked cross-browser. I suppose I shouldn’t have been too surprised as it uses valid CSS markup, but anyhow.
I wanted to give an existing image a background image and usually I would put the image in a ‘div’ or ‘li’ and apply css to that tag. In this instance my code needed to be as streamlined as possible as I needed to apply something else to those tags and so I simply added the background to the image itself.
Simply insert you image and apply the following CSS to it as a class (I’ve called mine layout-1):-
.layout-1 { background-image: url(images/your-background-image.jpg); background-repeat: no-repeat; padding-top: 3px; padding-right: 6px; padding-bottom: 3px; padding-left: 6px; background-position: 0px 0px; float: left; }
Here’s a quick example
/ before
We’ve simply padded out the image and inserted a background image that fills the pad behind. Make sure you float your image as otherwise it wont work.