Background for pictures

Get Started
1

I was trying to get a background image behind my images on my site. I’ve used a tutorial I found here: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/ It seems this is what I need but I must be doing something wrong because my background image is appearing in front of the picture I’m trying to show. :smiley:

Code is this:

.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery li {
	margin: 10px;
	padding: 0;
	float: left;
	position: relative;
	width: 135px;
	height: 90px;
}
.gallery img {
	background: none;
	border: none;
	padding: 4px;
}
.gallery span {
	width: 140px;
	height: 107px;
	display: block;
	position: absolute;
	top: -12px;
	left: 0px;
	background: url(../images/kader.png) no-repeat;
}
.gallery a {
	text-decoration: none;
}

What am I doing wrong? background picture is width: 140px and height 107px. Normal picture is width: 135px and height 90px

If there is an easier way, let me know

2

You should add the image to your li and use margins on your li img. You make it way to complicated using the span. And the span is wider than your li? How big is the kader?. lets say your kader is 10px wide, It could be like:


.gallery li {
    width: 135px;  height: 90px; background: url(../images/kader.png) 10px 10px no-repeat;
}

.gallery li img {
    margin: 20px; 
}
3

Sorry

<ul class="gallery">
				<li><span></span><a href="../images/Opening Halletwee Pics/foto0.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb0.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto1.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb1.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto2.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb3.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto3.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb4.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto4.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb5.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto5.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb6.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto6.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb6.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto7.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb7.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto8.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb8.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto9.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb9.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto10.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb10.jpg"/></a></li>
				<li><span></span><a href="../images/Opening Halletwee Pics/foto11.jpg" rel="clearbox[gallery=My Gallery]"><img src="../images/Opening Halletwee Pics/tumb11.jpg"/></a></li>
			</ul>
4

Could you post your HTML too? We are missing half the picture here.

5

Thanx,overcomplicating things is my thing :wink:

6

The effecht that I’m trying to achieve is like this from the tutorial.

http://heartwork.rockarena.be/5b_gallery-gold-frame.html

But I don’t understand what’s going on.