Skip to main content
A
ashleyc1208766
Participant
October 21, 2019
Question

how to insert a logo and navigation bar on top of a header image?

  • October 21, 2019
  • 1 reply
  • 3846 views

I am trying to get a logo and a navigation bar at the top of the image.  This image is my header image in Dreamweaver.  I have other things I want to overlay under the headline in the image.  Please advise.

 

I

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 21, 2019

    Use a background image in your <header>    See if this helps you.

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unique Page Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
font-size: 20px;
}
header > * {
margin: 0;
padding: 0;
}
header {
background: url(https://placeimg.com/1200/200/nature)no-repeat top center;
min-height: 200px;
text-align: center;
}
header h1 {
padding-top: 5%;
color: #222;
}
header h2 {
color: #973100;
font-family: script, fantasy, cursive, serif;
}
main {
width:75%;
margin:0 auto;
}
</style>
</head>
<body>

<nav>NAVIGATION GOES HERE</nav>
<header>
<h1>My Awesome Website</h1>
<h2>Some Pithy Slogan...</h2>
</header>

<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo optio porro velit, accusamus, consequuntur architecto! Explicabo ipsa cupiditate provident. Illum, aut, commodi? Voluptates</p>
</main>

<footer>
Footer goes here...
</footer>
</body>
</html>

     

     

    Nancy O'Shea— Product User & Community Expert
      A
      ashleyc1208766Author
      Participant
      October 21, 2019

      I have the image in my file it is not a website image.  I was talking about having Home About Us and etc on the image up top not but not at the exact top just a little ways down.  I am wanting it to look like this. This is a part of my mock-up of the website I am trying to develop in Dreamweaver.

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 21, 2019

      No need to duplicate your post.  To avoid confusion, I have merged this with your original question.

       

      So this isn't really a header image at all.  It's a whole page image. In that case move the background image to your body selector.

       

      body {
margin: 0;
padding: 0;
background: url(https://placeimg.com/1200/200/nature)no-repeat top center;
text-align: center;
background-size:cover;
}

       

      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