Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    trouble using image as background in css

    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

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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 ( / )

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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

    Code:
    .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;
       
       
    	}

    Code:
    <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

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    try putting display:block on the class pics..

    or.. add <div style="clear:both;"></div>
    Code:
    <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>

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by quartzy View Post
    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 CSS, Div,Linking, 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
    Code:
    .roundtop {
    background-image:url(/photo_site/border_top.png);
    height:50px;
    width:630px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •