SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body background image

    Im struggling to get a body background image to show! I have Large image background, that is in a div in the html. Here is the CSS and html:

    Code:
    #background { 
    	width:100%;
    	height:100%;	 
    	position:absolute; 
    	left:0; 
    	top:0; 
    	z-index:-999; 
    }
    
    #background img{
    	width:100%; 
    	height:100%; 
    	position:fixed;
    	left:0; 
    	top:0;	 
    }
    HTML Code:
    <div id="background">
      <img id="background_img" src="images/site/home/architecture.jpg" alt="#Url.gallery#">
    </div>
    This div is outside any of the other containers and is displayed well. Now I would like to have a background image (a small colored Line) on the far right hand side showing over the large image background. I tried to apply it to the body tag like this:

    Code:
    body {
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 100%;
    	line-height: 120%;
    	color: #FFF;
    	position: relative;
    	z-index: 1;
    	background: url(../images/site/wrapper.gif) 100% 0 repeat-y;
    }
    But it doesn't show. When refreshing the page you see its there. You might ask why I'm not applying the background image to my wrapper! That is because I already have a background image for the 100% height wrapper:

    Code:
    #wrapper {
    	width: 983px;
    	min-height: 100%;
    	font-size: .8125em;
    	background: url(../images/site/sidebar.png) 50px 0 repeat-y;
    	potition: relative;
    	z-index: 1;
    }
    What other options do I have to have that image (a small 10px width line ) on the right hand side with a 100% height?

    Thank you in advance!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Could you maybe post a live link and/or a screen shot?

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Here is a screenshot of the layout I'm after. The transparant sidebar is the background I used on the wrapper:
    Code:
    #wrapper {
    	width: 983px;
    	min-height: 100%;
    	position: relative;
    	float: left;
    	z-index: 1;	
    	font-size: .8125em;
    	background: url(../images/site/sidebar.png) 50px 0 repeat-y;
    }
    
    * html #wrapper {
    	height: 100%;	
    }
    Like I said I tried the yellow and green image right as property of the body tag but that isn't working.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    But it doesn't show. When refreshing the page you see its there. You might ask why I'm not applying the background image to my wrapper! That is because I already have a background image for the 100% height wrapper:
    The image on the body won't show because it is behind any content on the page. You can't move a background behind the body.

    Just nest an empty div and give it the same rules as your image but place it on the right.

    Code:
    #border{
    	width:10px; 
    	position:fixed;
    	right:0; 
    	top:0;
           bottom:0;
        background:url(img.gif) repeat-y 0 0;
    z-index:99;
    }
    Code:
    <div id="background">
      <img id="background_img" src="images/site/home/architecture.jpg" alt="#Url.gallery#">
    <div id="border"></div>
    </div>
    (I assume you know position;fixed doesn't work in IE6)


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
  •