Putting background image in header


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!


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


Could you also add the html you are using ?


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)


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.


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

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

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

  <!-- Centered link -->
  <div class="topnav-centered">
    <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>


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