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.
About the Author
