Treehouse: Grow your CSS skills. Land your dream job.

CSS header

  • # February 8, 2010 at 4:03 pm

    Hi all and heads up to the admin of this site, its great and useful.

    I am not really new to CSS, but I have picked many bad habits while learning it the wrong way.

    Anyways, this is my issue
    I have designed a simple layout in photoshop, everything is perfect now. But the problem is with the header, when I am converting it to xHTML/css does it have to be the same size? Example,

    Header is in photoshop is 900px width and about 70px height, so does it have to be the same size in css? I have tried repeating but that didn’t solve the problem. Any suggestions will be much appreciated.


    # February 8, 2010 at 8:11 pm

    I am not 100% sure I understand what you mean.

    If you have an image that is 100×100 pixels and you make it the background-image of a div that is set to 50×50 pixels, you are only going to see 1/4 of the image. To see the full image, the dimensions would have to be at least 100×100 pixels.

    # February 8, 2010 at 8:21 pm

    to set an image:

    background: "transparent or color" url("location of image") repeat on or off location x location y;
    height: image height you want displayed;
    width: image width you want display;


    background: transparent url(impages/header.png) no-repeat top left;
    height: 900px;
    width: 70px;

    # February 9, 2010 at 4:18 am

    Earlier you were saying it was 900×70.

    Put this in your html:


    And put this in your css:

    #header {
    background: transparent url(images/header.png) no-repeat left top;
    height: 70px;
    width: 900px;
    # February 11, 2010 at 8:28 pm

    Thanks guys for the fast reply, I didn’t know I will get a reply so fast.

    My question seems confusing, let me break it up. This is my css code for the header,

    height: 150px;
    background-image: url(Untitled-1.gif);

    I was just wondering about the size really, but after I checked couple of websites, I saw some of them use full background image for the header and some use small image and they just repeat it. In my case I will be using the first option cause i can’t repeat it.

    Again, thanks guys

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.