Putting background image in header


#1

Hi. I am very new to coding, and I am trying to figure out how to put an image as a background in the header area above my navigation bar. I want the image to be opaque and the words over it to be not opaque. I have tried to follow guidelines, and I can make the image appear in the body or opaque the header, but I can’t seem to get the image into the header section and have that be the only opaqued part. Here is the code I tried:

h1 {
  font-family: Georgia;
  color: #a50909;
  text-align: center;
  background: url(../Media/FarmFall.png) 100% 100% no-repeat;
  opacity: 0.3;
}

Is this enough information to see what I am doing wrong? What is the best way to do something like this? Thank you!


#2

Can’t help to much as I’m not super affluent. But hey arnt you using the header element? https://www.w3schools.com/tags/tag_header.asp


#3

Could you also add the html you are using ?


#4

Try this


h1 {
  font-family: Georgia;
  color: #a50909;
  text-align: center;
  background: url(../Media/FarmFall.png) no-repeat;
  background-position: 100%;
  background-size: cover;
  opacity: 0.3;
}

Result (using another background, obviously)


#5

Thank you. I tried this code, and it put the image on the whole page, which must mean that I am missing a division somewhere. It also opaqued the words as well as the image, which I did not want. I ended up adjusting the image in Photoshop.


#6

Here is the html I am using for one of the pages.

<!DOCTYPE html>
<tbody><html>
<head>
<title>Flying Cloud Farm</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet">
</tbody></html>
<h1> <img src="Media/Logo.jpg" class="logo">Flying Cloud Farm | Dressage</h1>

<!-- Top navigation -->
<div class="topnav">

  <!-- Centered link -->
  <div class="topnav-centered">
  </div>
    <a href="index.html" class="active">Home</a>
    <a href="Content/About.html">About the Trainer</a>
    <a href="Content/Lessons.html">Lessons</a>
    <a href="Content/Training.html">Training</a>
    <a href="Content/Clinics.html">Clinics</a>
    <a href="Content/Facilities.html">Facilities</a>
    <a href="Content/Staff.html">Meet our Staff</a>
    <a href="Content/Contact.html">Contact Us</a>
  </div>
  </div>

#7

Yeah. You misses the cover which @ghostlovescore got. Nice that you get it to work somehow =)