How to make the background image transparent - image?

Asked

Viewed 8,065 times

2

I want to make the background image transparent without affecting the other items of the body, only the image, but when I put the opacity the whole site becomes transparent, if in case there is no good practice I use the tag img as background image?

This is the html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Formularios</title>
    <link rel="stylesheet" href="formularioscss/formularios.css" type="text/css"/>
</head>

<body>


  <header class="cabecalho">

      <!-- <img src="imagens/faculdade_impacta_azul.jpg" alt=""> -->

        <ul>
            <li><a href=""> Home</a></li>
            <li>Lista de Cursos</li>
            <li>Noticias</li>
        </ul>
    </header>

    <div class="tran">
      <!--<img src="D:/Apache24/htdocs/TecWeb/EP_TecWeb/Formularios/Imagens/Fundo_Login.png" alt="">-->
    </div>
    <form method="GET" action="" class="formLogin">
        <label for="Login">Login</label>
        <p><input type="login" name="login" id="login"></p>

        <label for="senha">senha</label>
         <p><input type="password" name="senha" id="senha"></p>
    </form>
</body>

This is the css section that I want to make the background image transparent: 

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
   url("D:/Apache24/htdocs/TecWeb/EP_TecWeb/Formularios/Imagens/Fundo_Login.png");
    background-attachment: fixed;
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: 'PT Sans', sans-serif;
}
css html5

2 answers

2


The trick here is to create a new element just to handle the background image as follows:

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));
    font-family: 'PT Sans', sans-serif;
}
.bg-fundo {
    background-image: url("http://lorempixel.com/1280/720/city/5/");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
}
<body>
    <header class="cabecalho"></header>
    <div class="tran"></div>
    <form method="GET" action="" class="formLogin"></form>
    <div class="bg-fundo"></div> <!-- bg de fundo -->
</body>

And if it is necessary to strengthen even more to make the content of the site be on top of everything because of some problem of overlapping can always involve all content except the bg-fundo in a wrapper, and add a z-index higher than the bg-fundo. In other words:

<body>
    <div class="content-wrapper">
        <header class="cabecalho"></header>
        <div class="tran"></div>
        <form method="GET" action="" class="formLogin"></form>
    </div>
    <div class="bg-fundo"></div>
</body>

.content-wrapper{
    z-index: 1; /* ou mais */
}
.bg-fundo {
    z-index: 0;
}

  • Thanks worked out here, but now another problem has arisen, I’m using a horizontal menu in the upper part, and with the opacity the background image is superimposing the menu, as I arrange it?

  • @That’s because of the stacking level. That’s why I added that second option to create a wrapper and assign a z-index that way. Add a z-index of 0 or negative to the element .bg-fundo. For example: .bg-fundo{z-index:-1;}. If it doesn’t work, follow the instructions of the second method I indicated in my reply. To learn more about z-index visit this link or this answer in which I detailed a little about what z-index is in Portuguese.

  • Oops, now that I put -1 worked out, but once thanks

1

Implement a pseudo-element where your background will be applied. In the example below:

body > :first-child:before

Means:

Apply the following rules immediately before the first element within the element body:

This forces the creation of a pseudo-element that you can characterize in any way you want, without the need to create Wrappers.

body > :first-child:before {
    background-image: url("http://wallpapers-library.com/images/free-wallpaper-for-website-backgrounds/free-wallpaper-for-website-backgrounds-27.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content:'';
    opacity:.5;
    }
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

  • Or even in the body which in my opinion will be a better assignment body:before with a z-index of -1 since the first child element may or may not have its own pseudo element. I didn’t think about it, +1 ;) . It would not necessarily be necessary to create a wrapper, in my response the way I put the new element bg-fundo at the end of the document it automatically sits at a lower position than the previous elements on the Z axis. Wrapping is just a reinforcement.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.