positioning an image in the header (3 posts)

  1. zooph
    Posted 4 years ago #

    Hi There,

    I'm trying to position a image within the header.

    #header {
            background: url(images/topBars.jpg) no-repeat top left;
    	margin: 40px 0 0;

    here's the blog:

    I want the image [green/red bars to appear above the margin, ie right at the very top of the page and not below the margin - how do i go about setting the image to appear as I want, above the header. If I put it in the body it will not center on browser re-size.

    Ive tried a few things but can't get this one to work

    thank you!

  2. Michael Mann
    Posted 4 years ago #

    One thing you can do is change the margin-top to margin-top: 0. That will remove the top margin from the header and move the entire header to the top of the page.

    If you want just the bar at the top, you can try adding the image to the body css like so:

    background-image: url("images/topBars.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 760px;

    Hope that helps!

  3. Fire Truck
    Posted 4 years ago #

    Remove margin form #header and add padding-bottom: 40px; to the #page. Apply the background image to #page.

Topic Closed

This topic has been closed to new replies.

About this Topic