SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why can't I get this to work, load 2 images

    It works with 1 pictures
    #FootBar { background-color:#4364af;background-image:url(url.gif);background-repeat:no-repeat;background-position:top right;height:116px;width:100%;border:none; }


    Now I tried putting 2 pictures side by side and it's not working
    #FootBar { background-color:#4364af;background-image:url(url.gif),background-image:url(url2.gif);background-repeat:no-repeat;background-position:top left, top right;height:116px;width:100%;border:none; }

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem here is that you must understand what background-image does, it allows the element area to be covered with a background image. If you add another background-image property after one, the second one would override the first one. The idea here is that you cannot have two background images for an element. If you want two images, you should do it in html and not css.
    In search of the clouds...and maybe some work

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or nest them... If I'm reading the intent correctly... not quite sure where you got the idea you could put images together that way...

    The CSS
    Code:
    #FootBar_left, #FootBar_right {
    	height:116px;
    	width:100%;
    	border:none;
    }
    
    #FootBar_left {
    	background-color:#4364af;
    	background:url(url.gif) no-repeat top left;
    }
    
    #FootBar_right { 
    	/* no need to set background-color, we can see through to that underneath */
    	background-image:url(url2.gif) no-repeat top right;
    }
    the html

    Code:
    <div id="#FootBar_left">
    	<div id=#FootBar_right">
    		your content here
    	</div>
    </div>
    I've used this technique with repeat-y for borders in the past. In fact with padding and adding a third nested DIV, you can even put a third background in the middle between the two.


Bookmarks

Posting Permissions

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