trouble using image as background in css

[surreal5335]

I went through a couple tutorials on placing images as backgrounds and I am not getting anything.

I have tried the following syntax formats so far:

background-image: url('border_top.png');

background-image: url('/photo_site/border_top.png');

background-image: url("/photo_site/border_top.png");

background-image: url(/photo_site/border_top.png);

I am trying to use it to wrap a split up border around a set of images which will be viewed in jquery cycle.

so far nothing is showing up.

http://royalvillicus.com/photo_site/...e/photo_1.html

Thanks a lot for your help

[quartzy]

The syntax you are using is correct for the first one, if the image is in the same directory. But the others will not work, unless you specify the folder used before the ( / )

[surreal5335]

Thanks a lot for the info. I tried the suggestion you made but still no dice.

One note I should make, in order for me to be able to call images or files consitently I had to put a (/) in the begining if it was being stored in a child folder. I am not sure if that is just a firefox thing or what.

So maybe the problem is not the calling of images then, could be something else. I have included the two vital pieces of code I use on this border. Its pretty easy to see what my thought process was. Hopefully you can find something wrong with it. :P

.roundtop {
	
    background-image: url('photo_site/border_top.png');
    width: 630px;
    
    
    	}
    
    
.pics {

    background-image: url('photo_site/border_middle.png');
    background-repeat: repeat-y;
    width: 630px;
    text-align: center;
    
	}


.roundbottom 	{

    background-image: url('photo_site/border_bottom.png');
    width: 630px;
   
   
	}

<div class="roundtop"></div>

<div id="s1" class="pics">
<img src="/photo_site/pictures/bee.png" alt="1a" height="400" width="600"/>
<img src="/photo_site/pictures/Bridge.jpg" alt="1b" height="400" width="600"/>
<img src="/photo_site/pictures/Cat.jpg" alt="1c" height="400" width="600"/>
<img src="/photo_site/pictures/desert.jpg" alt="1d" height="400" width="600"/>
<img src="/photo_site/pictures/France.jpg" alt="1e" height="400" width="600"/>
<img src="/photo_site/pictures/House.jpg" alt="1f" height="400" width="600"/>
 	</div>

<div class="roundbottom"></div>

Thanks a lot

[jhaycutexp]

try putting display:block on the class pics..

or.. add <div style="clear:both;"></div>

<div class="roundtop"></div>

<div id="s1" class="pics">
<img src="/photo_site/pictures/bee.png" alt="1a" height="400" width="600"/>
<img src="/photo_site/pictures/Bridge.jpg" alt="1b" height="400" width="600"/>
<img src="/photo_site/pictures/Cat.jpg" alt="1c" height="400" width="600"/>
<img src="/photo_site/pictures/desert.jpg" alt="1d" height="400" width="600"/>
<img src="/photo_site/pictures/France.jpg" alt="1e" height="400" width="600"/>
<img src="/photo_site/pictures/House.jpg" alt="1f" height="400" width="600"/>


here..

<div style="clear:both;"></div>
 	</div>

<div class="roundbottom"></div>

[abduraooft]

Originally Posted by quartzy

The syntax you are using is correct for the first one, if the image is in the same directory. But the others will not work, unless you specify the folder used before the ( / )

That wasn't a good suggestion, and the OP needs the forward slashes in the url() to link those images with the stylesheet (other wise there should be some kinda ../ things). I'm running out of time (), so I'd recommend to check http://www.codingforums.com/showthread.php?t=158883, to get some idea.

I'm not sure about how you are planning to make a rounded box, though, you need to set a suitable width to your empty divs to show them by the browser, like

.roundtop {
background-image:url(/photo_site/border_top.png);
height:50px;
width:630px;
}