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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts

    2 bg images in a same ID

    Hello All,
    I have two colums (left col and right col)
    In the right col, I want to have a background image for the content, but also a different one for the bottom.
    However if I apply a bg to my #right_col
    then the bg doesnt work for my #right_col_btm
    What is the best way to get that bottom image always stand below the content of my right col bearing in mind that it must be relative to that right col and not to the overall main. Is there a special function to tell the rgt_btm to cover the bg of right_col? or what would be the simplest, cleanest option? (thanks a lot for your help)

    CSS
    Code:
    #right_col
    {
    	width: 626px;
        position: relative;
    	background-image: url("/images/bg_rgt.gif"); 
    }
    
    #right_col p
    {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 30px;
    }
    
    #right_col h1
    {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 15px;
    padding-right: 30px;
    }
    
    #rgt_btm
    {
    background-image: url("/images/bg_rgt_btm.gif") no repeat;
    width: 625px;
    height: 22px;
    }
    HTML
    Code:
    <div id="right_col">
      <h1>content</h1>
      <p>content</p>
      <div id="rgt_btm"></div>
    </div>

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    I can't see anything obviously wrong with your approach. A link to your page would be helpful, as we could see the images.

    By the way, no-repeat needs a hyphen, and when using CSS shorthand on the background, you'll want to change it from background-image to just background:

    Code:
    background: url("/images/bg_rgt_btm.gif") no-repeat;
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    mikacruz (03-03-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mikacruz,
    The validator is a quick way to find little mistakes like that. Check the links about validation in my sig below.
    Added a DocType and some colors in place since we don't have the images -
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #right_col {
    	width: 626px;
        position: relative;
    	background: #f00 url("/images/bg_rgt.gif"); 
    }
    #right_col p {
    	padding: 0 30px 0 15px;
    }
    #right_col h1 {
    	padding: 0 30px 0 15px;
    }
    #rgt_btm {
    	background: #000 url("/images/bg_rgt_btm.gif") no-repeat;
    	width: 625px;
    	height: 22px;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="right_col">
                    <h1>content</h1>
                    <p>content</p>
                <div id="rgt_btm"></div>
            <!-- end right_col--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Last edited by Excavator; 03-03-2009 at 07:16 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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