treehouse : what would you like to learn today?
Web Design Web Development iOS Development

I have a CSS problem!!!

  • I have watched the tutorials on adding code to a PSD file and even though i have used CSS before....i have never sliced up a PSD and pieced it together using CSS.

    The problem i have ( which is flamming peeing me off) is this:
    I have sliced up my PSD file and placed these images ( which i saved as a png) into a file called images inside a file called root. Also in the root file i have a xhtml and css file.
    Then using css...i tried putting all together using <div> tags. But it doesn't work!!!! Here's the code.

    HTML:

    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <body>

    <div id="header">

    </div>

    </body>
    </html>

    (Obviously i have a declaration above this)

    THE CSS:

    body {
    background-color: #333333;

    }




    #header {
    background-image:url(images/header_bg.png);
    background-repeat: repeat-x;
    background-position: top;
    }

    Yet....if i change the header id ( #header) to body...then it works!!
    Please HELP!!!!!!!!!!!!!!
  • I can't help because i dont understand what seems to be the problem! The code seems fine to me.
  • Since the code looked fine to me too, I tested it local. The code is correct indeed, but I think I know what's your problem: when you have no content in the header-div and you didn't gave it a width and hight, you won't see the background. So fill the div with content or set the width and height to see the background :)
  • Edwin is right =) If there is no content inside the div it will "collapse" to 0px in height and you won't see the background image.
  • Sorted!! I gave it some height and width attributes and bobs your uncle!!

    Many thanks for replies!!

    Neil
  • And I have learned a new expression:
    Bob's your uncle is a commonly used expression known mainly in Britain and Commonwealth countries. It is often used immediately following a set of simple instructions and roughly carries the same meaning as the phrase "and there you have it." For example, "Simply put a piece of ham between two slices of bread, and Bob’s your uncle.”

    Source: Wikipedia
    Didn't knew that before ;)