positioning an image in the header

  • 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:

    https://66.147.244.50/~transph4/dataisnature/

    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!

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘positioning an image in the header’ is closed to new replies.