Participant
,
My header has a background image (1200px by 225 px) -- not a page background image. How do I place the logo and the navigation bar on the image, not above it? I have tried everything and searched everywhere. Logically, you would think you could change the color that coding expects to an image, but you can't -- or I couldn't. It must be a coding problem that I haven't figured out. I did it in Muse, but I can't in Dreamweaver. I want it to look like this.
Can you please help me?
Thank you,
Margaret
11
Replies
11
11
Replies
Community Expert
,
Dreamweaver can do whatever you need it to do. But it's a coding tool, not a site generator like Muse.
See this example:
This is the working code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Header Background</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
header {
background:#6969db url(https://dummyimage.com/1200x225/6969dbblue/fff.jpg&text=Background)top center no-repeat;
background-size:cover;
color: white;
padding:2%;
/**same size as background-image**/
max-width:1200px;
max-height:225px
}
</style>
</head>
<body>
<header class="container">
<nav>Navigation menu</nav>
<img src="https://dummyimage.com/150x75/&text=Logo" alt="logo placeholder">
</header>
<main>
<h3>Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At id assumenda reiciendis aperiam eum unde obcaecati, inventore voluptatem, doloribus, culpa, asperiores nesciunt quidem in! Perferendis impedit sapiente repudiandae quis excepturi!</p>
</main>
<hr>
<footer>Footer</footer>
</body>
</html>
AdChoices