Skip to main content
T
Taffypro
Known Participant
January 28, 2017
Answered

Images on top of images. Basic HTML/CSS question

  • January 28, 2017
  • 1 reply
  • 1322 views

Hi,

I'm curious of the best way to place an image on top of another and have them both center.  For example I have a nice background.png image.  I want to assign it to the body tag (or should I assign it to a container div?) and have it center/top.  Next I want to place a header image ON TOP of the background image and have it center as well and be flush on the top.

Thanks for anyone who can help

    This topic has been closed for replies.
    Correct answer Nancy OShea

    You mean something like this?

    CODE:

    <!doctype html>

    <html>

    <head>

    <title>Centered Page</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    img {

        display: block;

        vertical-align: baseline;

        max-width: 100%;

    }

    body {

        width: 90%;

        margin: 0 auto;

        background: url(http://lorempixel.com/900/500/abstract/4) no-repeat center center fixed;

        background-size: cover;

    }

    header {

        width: 70%;

        margin: 0 auto;

    }

    </style>

    </head>

    <body>

    <header>

    <img src="http://dummyimage.com/900x700" alt="header banner">

    </header>

    </body>

    </html>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 28, 2017

    You mean something like this?

    CODE:

    <!doctype html>

    <html>

    <head>

    <title>Centered Page</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    img {

        display: block;

        vertical-align: baseline;

        max-width: 100%;

    }

    body {

        width: 90%;

        margin: 0 auto;

        background: url(http://lorempixel.com/900/500/abstract/4) no-repeat center center fixed;

        background-size: cover;

    }

    header {

        width: 70%;

        margin: 0 auto;

    }

    </style>

    </head>

    <body>

    <header>

    <img src="http://dummyimage.com/900x700" alt="header banner">

    </header>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    T
    TaffyproAuthor
    Known Participant
    January 29, 2017

    Hi Nancy,

    Thanks for the reply.  It is interesting how you coded this.  I would have tried to use a Z-Index.

    One further question if you don't mind....  Let's say you want to put a logo image within the header and float it left.  (So basically an image on top of the header image.  Or perhaps another below the header image?

    I really appreciate your response

    Gary

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 29, 2017

    Z-index only works on positioned elements.  To keep my sanity, I avoid positioning in primary layouts if at all possible.  It really doesn't work well in responsive layouts. 

    For what you want,  I think it's wise to begin with a grid and figure out on paper where you plan to put your elements.  Hence this forum's banner image of a chalkboard with scribbled layout ideas.  That's how I approach all new projects.  

    Alternatively, you could combine logo with banner in Photoshop to make one image. Whichever works best.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices