Image with Background Image CSS

Glenn Glenn's Blog 0 Comments

Image with Background Image CSS Image with Background Image CSS css tips

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

Image with Background Image CSS Image with Background Image CSS avelon womenswear

after /
Image with Background Image CSS Image with Background Image CSS avelon womenswear

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
Image with Background Image CSS Image with Background Image CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *