-1

here is part of the CSS code, i cant seem to figure it out.

    #About{
           height:500px;
           background: url("murano.jpg") no-repeat center;
    }

I want to decrease the opacity of the imported background image

Ahmed Siddiqui
  • 43
  • 7
  • just add `opacity: 0.somevalue` to the #About rule, or is it more of an issue like this http://stackoverflow.com/questions/10422949/css-background-opacity ? In which case its a duplicated question. – spaceman Apr 27 '16 at 18:35
  • are you trying to set the opacity through js? since you tagged js – Matt Apr 27 '16 at 18:36
  • there is also some text in my About div, so if i put opacity:0.4; underneath the line it affects the opacity of the text too. @spaceman – Ahmed Siddiqui Apr 27 '16 at 18:41
  • take a look at the link I posted then, should help. – spaceman Apr 27 '16 at 18:47
  • You would want to have a nested `div` then so that your background image isn't the same `div` as your content. – leigero Apr 27 '16 at 18:50
  • also, does anyone know how to make the div the same height as the background image and make it relative even when you change the picture itself or the size of the picture – Ahmed Siddiqui Apr 27 '16 at 19:42
  • No...you can't do that with CSS...you'd need javascript and even then it would be hard. – Paulie_D Apr 27 '16 at 20:36

4 Answers4

0

Add Opacity with your css

#About{
           opacity :0.4;
           height:500px;
           background: url("murano.jpg") no-repeat center;
    }
Balu B
  • 41
  • 1
  • 6
  • That makes the **entire element** translucent, not just the background image. See [this comment](http://stackoverflow.com/questions/36898116/trying-to-make-my-background-image-transparent#comment61360660_36898116) from before you even posted your answer. – Quentin Apr 27 '16 at 18:45
0

the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity

there is no css rule to provide opacity to background images. when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4

<div id="about">
 <div class="absolute">
 </div>
</div>

#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
 background:rgba(0,0,0,0.5);
}
Ashish
  • 409
  • 1
  • 9
  • 24
-1

Use background-color: rgba(255, 255, 0, 0.3);

The 0.3 being the the alpha(opacity channel).

OR

Add an extra div to hold the background, and change the opacity there.

opacity: 0.4; filter:alpha(opacity=40);

Example :

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://i40.tinypic.com/3531bba.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.head {
  width: 150px;
  height: 160px;
}
body {
  font-family: tahoma, helvetica, arial, sans-serif;
  font-size: 12px;
  text-align: center;
  background: #000;
  color: #ddd4d4;
  padding-top: 12px;
  line-height: 2;
}
td,
th {
  font-size: 12px;
  text-align: left;
  line-height: 2;
}
#wrapper {
  margin: auto;
  text-align: left;
  width: 832px;
  position: relative;
  padding-top: 27px;
}
#body {
  background: url(images/body_bg_1.gif) repeat-y;
  width: 832px;
}
#bodyi {
  background: url(images/body_top_1.gif) no-repeat;
  width: 832px;
}
#bodyj {
  background: url(images/body_bot_1.gif) bottom no-repeat;
  padding: 1px 0;
}
#body2 {
  background: url(images/body_bg_2.gif) repeat-y;
  width: 832px;
}
#bodyi2 {
  background: url(images/body_top_2.gif) no-repeat;
  width: 832px;
}
#bodyj2 {
  background: url(images/body_bot_2.gif) bottom no-repeat;
  padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
  margin: 0;
  padding: 0;
}
#nav {
  font-size: 10px;
  position: absolute;
  right: 0;
  top: 12px;
  line-height: 1.2;
  padding-left: 120px;
}
#nav li {
  float: left;
  width: 108px;
  list-style: none;
  margin-left: 2px;
  border-bottom: 1px solid black;
}
#nav a {
  background: #738d09;
  color: #2e3901;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 1px 0;
}
#sidebar {
  float: left;
  width: 250px;
  padding-left: 4px;
}
#sidebar .content {
  padding-left: 24px;
}
#sidebar .content img {
  float: left;
  clear: left;
  margin: 5px 5px 5px 0;
}
#sidebar .divider {
  background: url(images/left_splitter.gif) center no-repeat;
  height: 5px;
  width: 169px;
}
#content {
  float: right;
  width: 462px;
}
#content1 {
  float: left;
  width: 800px;
}
#content1 .content {
  margin: 7px 35px 7px 20px;
  padding-left: 20px;
}
#content .content {
  margin: 7px 55px 7px 17px;
}
#content .content table {
  width: 310px;
  margin-right: 0px;
}
#content .content table td,
#content .content table th {
  padding-right: 10px;
}
#content .content table td.download {
  text-align: right;
  padding-right: 0px;
}
#content .divider {
  background: url(images/right_splitter.gif) repeat-x;
  height: 5px;
}
h1 {
  position: absolute;
  left: 0;
  top: 0;
}
h2 {
  font-size: 10px;
  color: #cf9118;
  margin: 1em 0;
}
h3 {
  font-size: 10px;
  margin: 1em 0;
}
h5 {
  font-size: 20px;
  color: #cf9118;
  margin: 1em 0;
  text-align: center;
}
h6 {
  font-size: 18px;
  margin: 1em 0;
}
p {
  margin: 1em 0;
}
img {
  border: 0;
}
img.left {
  float: left;
  margin-right: 14px;
}
img.right {
  float: right;
  margin-left: 14px;
}
.readmore {
  text-align: right;
}
.hidden {
  visibility: hidden;
}
.clear {
  clear: both;
}
a {
  color: #f0b33c;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #cf9118;
}
a:hover {
  text-decoration: underline;
}
table a {
  text-decoration: underline;
  font-weight: normal;
  color: #7f7c79;
}
#power {
  color: #fff;
  text-align: center;
}
#power a {
  color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
  <ul id="nav">
    <li><a href="index.htm">Inicio</a>
    </li>
    <li><a href="sobre.htm">Sobre a banda</a>
    </li>
    <li><a href="membros.htm">Membros</a>
    </li>
    <li><a href="bilhetes.htm">Bilhetes</a>
    </li>
    <li><a href="galeria.htm">Galeria</a>
    </li>
    <li><a href="areapessoal.php">Área Pessoal</a>
    </li>
  </ul>
  <h1><a href="index.htm"></a></h1>
  <div id="body">
    <div id="bodyi">
      <div id="bodyj">
        <div id="sidebar">
          <div class="content">
            <h2>Galeria de imagens</h2>
            <p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
            <p class="readmore"><a href="galeria.htm">Ver</a>
            </p>
          </div>
          <div class="content">
            <h2>Noticias</h2>
            <h3>18 de Abril, 2011</h3>
            <h4>"So Far Away" vai ter videoclip</h4>
            <p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
              filmagens.</p>
            <h3>10 de Março, 2011</h3>
            <h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
            <p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
              <p>
                - Best International Band (Melhor Banda Internacional)
                <p>
                  - Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
          </div>
        </div>
        <div id="content">
          <center>
            <img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
          </center>
          <div class="content">
            <h2>O album mais recente</h2>
            <img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
            <p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
              em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
              cinco discos de originais na sua carreira.</p>
            <div class="divider"></div>
            <h2>Musicas com maior sucesso</h2>
            <table summary="track downloads" border="0" cellspacing="0">
              <tr>
                <th width="55%">Faixa</th>
                <th>Album</th>
                <th class="hidden">Dowload links</th>
              </tr>
              <tr>
                <td>Bat Country</td>
                <td>City of Evil</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=IHS3qJdxefY">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Beast and the Harlot</td>
                <td>City of Evil</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=7bDg7n-chhU">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Seize the Day</td>
                <td>City of Evil</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=jUkoL9RE72o">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Almost Easy</td>
                <td>Avenged Sevenfold</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Afterlife</td>
                <td>Avenged Sevenfold</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=HIRNdveLnJI">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Nightmare</td>
                <td>Nightmare</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=94bGzWyHbu0">Ouvir</a>
                </td>
              </tr>
              <tr>
                <td>Welcome to the Family</td>
                <td>Nightmare</td>
                <td class="download"><a href="http://www.youtube.com/watch?v=1OZs7IoWTvc">Ouvir</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div align="right">
    <font size="2">text</font>
  </div>
</div>
Ani Menon
  • 27,209
  • 16
  • 105
  • 126
-1

you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.

here is a link to a good article on this.

ETHAN BEIGH
  • 23
  • 4