Placing a background image behind an image

I want to make a gallery with a few images in each row. The thumbnails, unfortunately, are not the same size, and so, I want to place a frame (which will be the same size always) behind each picture.

I need to build this page in CSS without table…

  1. Can I place a background image (in this case, the frame) behind each image?

  2. Can someone think of a smarter way to do this?

I tried using in my CSS file and adding "class=“border” to my img src tag and the margin worked, but not the background image!:

img.border {
background-image:url(‘frame.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
margin:10px;

}

Thanks!!!

what about perhaps something along the lines of this

 
<div style="background-image: url('bg_image.jpg')">
    <img src="pic1.jpg" alt="" />
</div>

I used an inline style for demo purposes only

Thanks!

…but…

problem is I want to place two or more images across, and with <div> , it puts a line space under it, and the second image appears under, and not across

Try wrapping your background thumbnail image in a .container DIV and then wrapping your thumbnail images in a .thumb DIV. Here is an example:

<html>
<head>
<style type="text/css">
<!--
img { border: 0; }
.container { display: inline; height: 180px; width: 180px; margin: 4px; padding: 20px; float: left; background-color: #F1F1F1; border: 1px solid #E8E8E8; }
.thumb a { display: block; width: 180px; height: 180px; padding: 1px; background-color: #333333; }
.thumb a:hover { background-color: red; }
-->
</style>
</head>
<body>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
<div class="container"><div class="thumb"><a href="#"><img src="image.png" width="180" height="180" /></a></div></div>
</body>
</html>

The following is a slightly different approach then Todd Temple’s one. I use list items in this case:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul, ol, li {
	margin: 0;
    padding: 0;
	list-style-type: none; 	
}

#gallery {
	width: 100%;
	margin: 0 auto;
}

#gallery li {
	height: 160px;
	line-height: 160px;
	margin-right: 5px;
	float: left;
	display: block;
	background: #FF0000;
	text-align: center;
}

#gallery li img {
	margin: 0 10px;
	vertical-align: middle;
}

</style>
</head>

<body>
<ul id="gallery">
<li> <img src="images/test1.jpg" alt="" class="img" /></li>
<li> <img src="images/test2.jpg" alt="" class="img" /></li>
<li> <img src="images/test3.jpg" alt="" class="img" /></li>
</ul>
</body>
</html>

'I didn’t set a width but let that depend on the width of the image and gave the images a side margin of 10px

In both the great examples, you inserted a CSS frame under the image. I want a fancy frame… isn’t there a way I can place an image under the top image?

Please see this example. I have attached the complete gallery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pictute Frame</title>
</head>
<style>
body{
	padding:50px;
	margin:20px;
  	background:#0C0C0C;
	color:#fff;
	font:12px/18px Arial, Helvetica, sans-serif;
	}
div, h1, h2, h3, h4, p, img, ul, ol, li, form, input, textarea{
	padding : 0;
	margin : 0;
	list-style : none;
	}
#center{
	width:800px;
	height:auto;
	margin:0 auto;
	}
	
#gallery{
	width:800px;
	height:auto;
	border:#202020 1px solid;
	float:left;
 	}	
#gallery ul{
	width:788px;
	height:auto;
	float:left;
	padding:20px;
	border:#000 1px solid;
	}	
#gallery ul li{ position:relative; width:260px; height:197px; float:left; }
#gallery ul li span{ position:absolute; z-index:1; width:249px; height:197px; background:url(frame.gif) 0 0 no-repeat;}
#gallery ul li img{ position:relative; left:28px; top:28px;}	

</style>



<body>
<div id="center">
  <div id="gallery">
    <ul>
      <li><span></span><img src="img1.jpg" alt="" width="198" height="158" /></li>
	  <li><span></span><img src="img2.jpg" alt="" width="198" height="158" /></li>
	  <li><span></span><img src="img3.jpg" alt="" width="195" height="150" /></li>
    </ul>
  </div>
</div>
</body>
</html>