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

Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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.

 

MVJIT_0-1649092591690.png

Can you please help me? 

Thank you,

Margaret

Views

106

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Use the CSS background property on your parent container. 

 

For better answers, show us your HTML code.

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Thank you for the links. I have read them before and maybe my problem is my lack of web coding language. I have the book Adobe Dreamweaver CC Classroon in a Book which has a web edition so I have read it and followed the lessons. This is one thing that they do not cover as one. They have the navbar and logo on a separate row and another row where they show you how to add a background image, but they are 2 separate items/rows. I can't get a background image in the 'row' containing the logo and navbar. Everytime I try, the logo and navbar jump to the space above the the row/container where I am trying to place it. 

 

I am so frustrated as I have worked days and days on this. The coding should be really simple. It's just a logo and navabar on top of a picture which should be replacing a color. I guess Photoshop and InDesign are just too engrained in my brain.

Thanks

Margaret

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Dreamweaver can do whatever you need it to do.  But it's a coding tool, not a site generator like Muse. 

 

See this example:

image.png

 

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Thank you Nancy. I can't wait to try this, but I have to. I have a meeting in 2 minutes. I will let you know how it went. I'll have to shorten my meeting.

Margaret

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

LATEST

Repeat post.

- 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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines