Skip to main content
M
MVJ-IT
Known Participant
April 4, 2022
Question

How do I place a logo and navbar in a header with a background image instead of color.

  • April 4, 2022
  • 2 replies
  • 3064 views

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

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 4, 2022

    Here's how you do it, using the background-image property in CSS...

    https://www.w3schools.com/css/css_background_image.asp

     

    M
    MVJ-ITAuthor
    Known Participant
    April 4, 2022

    Thank you Jon. I went to the link you provided and they said it was for a full page, although when I went further down the page and it said "The background image can also be set for specific elements, like the <p> element:" I wish they had gone further and had given a code example of the "header" element -- that is of course if it is an element. It must be possible, because I have seen others do it, but maybe that's because they weren't using Dreamweaver. I can't believe it's not possible in Dreamweaver. 

     

    Margaret

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 4, 2022

    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>

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 4, 2022

    Use the CSS background property on your parent container. 

     

    For better answers, show us your HTML code.

     

     

     

    Nancy O'Shea— Product User & Community Expert
    M
    MVJ-ITAuthor
    Known Participant
    April 4, 2022

    Hello Nancy,

     

    Thank you for your response, but I am not the best at Dreamweaver (I’m re-learning it.), so I may be misinterpreting what you are saying. Is the parent container the whole page? I don’t want the whole page. I have tried the background for the container for the header, but I hasn’t worked. It doesn’t seem to understand what I’m coding. I’m not the best coder either. I really did like Muse. But I must relearn Dreamweaver and the basics are the hardest.

     

    Thank you

     

    Margaret

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 4, 2022

    No.  The <body> tag is the entire page.  The parent container is one that holds your navigation menu and logo.  The name many vary depending on your HTML structure.  That's why we need to see your code.

     

    Meanwhile, please review HTML basics.  It's required knowledge.

    - https://www.w3schools.com/html/

     

    Also bookmark CSS and JS tutorials for reference:

    - https://www.w3schools.com/css/
    - https://www.w3schools.com/js/

     

    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