SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image with fixed image.

    I'm redesign a site for my roomate band. I have a background image fixed in the body tag.
    Code:
    body {
    	margin: 0; 
    	padding: 0; 
    	font-family: verdana, sans-serif; 
    	font-size: 80%;
    	background: #92cded url(/images/vertGBD.jpg) fixed no-repeat;
    	background-position: top right;
    }
    Then i have a block for header, then next comes 3 columns. For those columns i want a background image to emulate border and full height. So i wrapped 3 col around with #wrapper.

    Code:
    #wrapper{
    	width: 716px;
    	background: #92cded url(/images/bodybg.gif) repeat-y bottom left;
    }
    The background image for #wrapper doesn't seem to show up.

    Can I do it that way or I'm my completely off? Here's the link to the test page.

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not 100% sure on this, but I think the url is being ignored because you have a background color preceeding it on the same line in the style rule.

    You might try this.

    Code:
    #wrapper{
    width: 716px;
    background-color: #92cded;
    background-image: url(/images/bodybg.gif) repeat-y bottom left;
    }

  3. #3
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure you can use background color in background statement.

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, O.K., I should have noticed this before.

    Try setting a height on the div.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background-image shows up fine for me.

    Doctype, that won't work. You either need to use background-image, background-repeat, and background-position or just background.

    Putting the color as the first value of the background property should work fine.

    http://www.w3.org/TR/REC-CSS2/colors...def-background
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess it's not showing up in Firefox for me. Just checked it in IE and work fine.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of Firefox are you using?

    The background-image is visible in Firefox 1.0.x, Netscape 6+, IE4+, and Opera 6+.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm running Firefox 1.0.3.

  9. #9
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another question about my menu which is incorrect in Internet Explore. It seems like the #siteNav list box is about 2pixel bigger in height then the specified 23.

    Another problem that i have in IE is the right column does not seem to stay to the right. It's either being clear or not fitting within the specify width.

    I cant seem to figure out those two problems, can someone help?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The right column is not floating to the right because it doeasn't have room to float there.

    You have measured your columns exactly but inside the right column whhich is 240px wide you have placed an image that is 234px wide inside a container that has margins of 30px. That stretched the right float 264px wide which is 24px too wide for the main container. Other browsers ignore the overflow but ie treats width as if it were min-width and will stretch a container if the content is too big.

    If you reduce the margins here you will see that it now floats in place:

    Code:
    div#rightbox #rightwrapper {
     margin: 182px 3px 10px 3px;
    }
    If you want more padding then you will need to increase the width of the main container to match.

    To fix the list problems just float the list and give it a height as follows:

    Code:
    #siteNav li {list-style: none; margin: 0; padding: 0;height:23px;float:left}
    That should sort it out


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
  •