How to leave the background image with transparent background?

Question

How to leave the background image with transparent background?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I want to leave the background image transparent without affecting the other items of the body, only the image, but when I place the opacity the entire site becomes transparent, if in case it does not have as good practice I use the img tag as image background?

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 snippet that I want to leave the transparent background image:

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;
}

html5 css

asked by anonymous 20.09.2017 / 17:01

2 answers

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 body element:

This forces you to create a pseudo-element that you can characterize 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>

20.09.2017 / 19:37

Generic Class receiving a List? Multiplying Values in JAVASCRIPT

score 2 · Accepted Answer

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 you need to enforce even more to make the content of the site get over it because of some overlapping problem you can always wrap the whole content minus the bg-fundo in wrapper , and add a z-index greater than 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;
}