1

I just have started studying HTML and CSS, so I have a header with a few Il's and a logo between them, I set the height and width of the header so that I can change the background into a picture, when I changed it, the color of the background and the text was overflowing, so you couldn't read the text. I wanted to change the header opacity so that the background would be lighter and you could read the text, but it changed the opacity of all the header elements including the logo. The question is, how can you change the opacity of the background picture, but without changing the opacity of the text. Hope anyone will understand what I have written XD. Please ask questions if you didn't understand.

header {
  padding: 15px;
  height: 150px;
  text-align: center;
  font-size: 17px;
  background-image: url("images1/Baled.png");
  background-size: 100%;
  background-position: center;
}

li {
  display: inline-block;
  line-height: 75px;
}

header .logo a {
  background-image: url("images1/Newartisanweblogo.png");
  display: inline-block;
  background-repeat: no-repeat;
  background-image: 1px;
  width: 150px;
  height: 80px;
  text-indent: -9999999px;
  background-size: 150px;
}
<nav>
  <ul>
    <li>
      <a href="home.html"></a>Home</li>
    <li>Menu</li>
    <li class="logo"><a>Logo</a></li>
    <li>Contact</li>
    <li>Locations</li>
  </ul>
</nav>
strek
  • 1,190
  • 1
  • 9
  • 19
Just Started
  • 17
  • 5
  • Can you add the css rules you made? If you want to change the opacity of the background picture, you need to create a css rule that targets only the element with the background picture. – tomerpacific Aug 25 '19 at 09:49
  • Ok, i added the css style – Just Started Aug 25 '19 at 09:57
  • To change the opacity of the background image, use: ``` opacity: 0.5;```. **Keep in mind that this will change the element's opacity and not just the background**. If you want to just change the background image's opacity, consider creating a new version of the image where the opacity has been changed. – tomerpacific Aug 25 '19 at 10:00
  • Where should I add this part of code? when I am adding this to header it changes the opacity of everything – Just Started Aug 25 '19 at 10:02
  • tomerpacific Could you please show me how to do this, the source code is above. – Just Started Aug 25 '19 at 10:03
  • Check [this](https://stackoverflow.com/questions/637921/opacity-of-background-color-but-not-the-text) and [this](https://www.w3schools.com/css/css_image_transparency.asp). – tomerpacific Aug 25 '19 at 10:08

4 Answers4

0

Try and give a z-index ...................................................................... links: https://www.w3schools.com/cssref/pr_pos_z-index.asp w3 schools https://developer.mozilla.org/en/docs/Web/CSS/z-index mdn

By placing the li (ie: your text) whith a higher z-index than your background (give your background a low z-index) it should solve your problem since your your item you are giveing opacity to will be behind and the opacity wont affect your text. .................................Also make your background img a html img tag instead .......................................................................... Hope it helped

muhammad
  • 245
  • 1
  • 13
0

There is no easy way to change the opacity of a background-image itself. However, you can work around this problem by using an html img tag instead. This article explains how to do it: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

Adam
  • 71
  • 10
  • Thanks for your help, I would try this method but I don't know how do I place the img on the position I want, by the way, thanks a lot for your help, I will study your method. – Just Started Aug 25 '19 at 20:22
0

You should add this to make it work:

body::after {
  content: "";
  background: url(img.jpg);
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Sadly there is no CSS property to set the background opacity.

MUL8RSoftware
  • 71
  • 5
  • Thanks, for your help. But what should i write in the content: ""; ? Also is there anything else i must add to the code? – Just Started Aug 25 '19 at 20:16
  • You shouldn't write anything. The content is just text, and that's not our objective. The _z-index_ bring the opacity to another level, so it doesn't effect the text. You should be able to copy and paste it and make it work right away – MUL8RSoftware Aug 26 '19 at 10:06
0

There is multiple ways of changing the background opacity,However I don't know if it's possible to change the opacity for an image background ,but you can use background-color: rgba(255, 255, 255, 0.5); to set the color and the opacity for the background without affecting the text or making both the text and the background position:absolute; After all you can change the image opacity from an external app like photoshope

Ahmed Humoody
  • 1