CSS Background image opacity without affecting other elements inside the div (like text), using ::after. If you're not using sass/scss then move the &:after out to its own, #flag-top:after{}

foo.scss

// This is the div you want your background image to be in
#flag-top {
  
  // Here is where the background image is added and the opacity is controlled
	&:after {
		content : "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('../images/flag_topper.jpg');
		width: 100%;
		height: 100%;
		opacity : 0.2;
	}

	h1 {
		color: $white;
	}
}