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

Report · Oct 21, 2019

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

Report · Oct 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 & Moderator

Report · Oct 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.

Report · Oct 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 & Moderator

Report · Oct 21, 2019

Copy and paste the following into a new document.

<!doctype html>
<html><head>
  <base href="/aa/">
  <meta name="ac:base" content="/aa">
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
  html {
      min-height: 100%;
      margin-left: calc(100vw - 100%);
      }
      body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      }
      main {
      flex: 1 0 auto;
    }
  </style>
  </head>
  <body>
    <header class="bg-light">
      <div class="container">
        <div class="row">
          <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
              <a class="navbar-brand mr-auto ml-auto" href="#">Navbar</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
                <div class="navbar-nav">
                  <a class="nav-item nav-link active" href="#">Home</a>
                  <a class="nav-item nav-link" href="#">About</a>
                  <a class="nav-item nav-link" href="#">Contact</a>
                </div>
              </div>
            </nav>      </div>
        </div>
      </div>
    </header>
    <main class="d-flex justify-content-center align-items-center">
      <h1>Welcome to Buy My House Greenville</h1>
    </main>
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 align-self-md-end">
            <h4>Are you..</h4>
            <p>A nice paragraph</p>
            <p>A nice paragraph</p>
            <p>A nice paragraph</p>
            <p>A nice paragraph</p>
            <p>A nice paragraph</p>
          </div>
          <div class="col-12 col-md-6">
            <div class="container">
              <form id="register1">
                <div class="row justify-content-center">
                  <div class="col-12 col-md-8 col-lg-8 col-xl-6">
                    <div class="row">
                      <div class="col text-center">
                        <h4>Register</h4>
                        <p class="text-h3">Enter your registration details below.</p>
                      </div>
                    </div>
                    <div class="row align-items-center">
                      <div class="col mt-4">
                        <input type="text" id="inp_company" name="company" class="form-control" placeholder="Company Name">
                      </div>
                    </div>
                    <div class="row align-items-center mt-4">
                      <div class="col">
                        <input type="email" id="inp_email" name="email" class="form-control" placeholder="Email">
                      </div>
                    </div>
                    <div class="row align-items-center mt-4">
                      <div class="col">
                        <input type="password" id="inp_password" name="password" class="form-control" placeholder="Password">
                      </div>
                      <div class="col">
                        <input type="password" id="inp_password2" name="password2" class="form-control" placeholder="Confirm Password">
                      </div>
                    </div>
                    <div class="row justify-content-start mt-4">
                      <div class="col">
                        <div class="form-check">
                          <label class="form-check-label">
                            <input type="checkbox" class="form-check-input">
                            I Read and Accept <a href="#">Terms and Conditions</a>
                          </label>
                        </div>
                        <button class="btn mt-4 btn-primary">Submit</button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body></html>

Wappler, the only real Dreamweaver alternative.

Adobe Community

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