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
  • 3046 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

    M
    MVJ-ITAuthor
    Known Participant
    April 4, 2022

    You're being a bit too litteral.

    While they mentioned the <p> tag, the background-image property can be added to the CSS of just about anything. 

    Speaking from my own experience with DW after GoLive was killed, before going any further with the program, you really do need to have a firm grasp on CSS element, class and id selectors and how they affect your HTML. DW expects you to understand HTML and CSS (and to a lesser degree, Javascript). "Learning DW" is going to be an exercise in banging your head against a wall without those under your belt.

    Nancy's CSS tutorial is the one I would suggest you go through. Take a weekend to really pour over the info there and make sure to use the "Try it yourself" links, they're very important for getting the feel for how it needs to be done.

    Honestly after you understand the basics, finding what you need within DW is a snap, and you'll kick yourself for not figuring it out sooner (I know I did).


    Thank you, Jon. I will definitely try Nancy's tutorial, but where is it? Do you have a link?

     

    Thanks for the reminder of GoLive. I loved GoLive. It was so easy to use. I think Adobe would have been better off keeping it rather than paying a bundle to buy Dreamweaver from Macromedia. 

     

    Hopefully this coming weekend will be more successful than last weekend.

    Thanks again 

    Margaret

     

    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