Hace poco publicamos un snippet que explica como insertar una imagen de fondo, como ajustar las medidas dinámicamente o a una altura justa y como alinear sus contenidos, este snippet Imagen background lo puedes ver pulsando aquí.
Entonces ahora lo interesante del caso es poder controlar la opacidad de esta imagen para que los contenidos, situados por encima, se vean mejor. Esto lo conseguimos cargando la imagen con el pseudo-element :before y es aquí donde con la propiedad opacity controlaremos el nivel de opacidad.
Aquí tienes el markup, de este snippet.
HTML
<div class="background-wrap">
<div class="background">
<h1 class="title">Background opacidad</h1>
<p class="paragraph">Controla la opacidad del fondo de un div, puede ser color o imagen, sin afectar a sus contenidos.</p>
</div>
</div>
En la capa background-wrap aprovechamos para darle un color de fondo, para que contraste con la imagen que va cargarse dentro con la otra capa background y si le damos transparencia a la capa brackground quizás nos pueda interesar darle color negro en vez de blanco a la capa background-wrap y nuestra imagen se verá mas realista, en fin cada diseño tiene su aquel.
La imagen la cargamos en la capa background con el pseudo-element :before y aquí le añadimos la propiedad opacity para controlar solo la transparencia de la imagen. Los contenidos que se pongan por encima de la imagen no se verán afectados por la opacidad marcada.
En pantallas anchas, para ordenadores, le damos a la imagen un comportamiento diferente con el scroll, la propiedad background-attachment le añade una posición fixed.
Estos son los estilos.
CSS
body {
font-family: sans-serif;
margin: 0;
}
.background-wrap {
background-color: #000000;
}
.background {
position: relative;
overflow: hidden;
padding: 200px 20px;
z-index: 2;
}
@media (min-width: 576px) { .background { padding: 180px 40px; } }
@media (min-width: 768px) { .background { padding: 240px 60px; } }
@media (min-width: 992px) { .background { padding: 240px 100px; } }
@media (min-width: 1200px) { .background { padding: 240px 120px; } }
.background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #212121;
background-image: url("https://www.smoothemes.es/media/images/gopro.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: inherit;
background-position: center center;
opacity: 0.65;
filter: alpha(opacity=65);
z-index: -1;
}
.title {
font-size: 50px;
margin: 0 0 20px 0;
padding: 0;
color: #5680cf;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
}
@media (min-width: 576px) { .title { font-size: 60px; } }
.paragraph {
font-size: 20px;
margin: 0;
padding: 0;
color: #E4DA3A;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
@media (min-width: 576px) { .paragraph { font-size: 22px; } }
Se puede ver como funciona el ejemplo en CodePen.
See the Pen Background opacidad by Smoothemes (@smoothemes) on CodePen.0
Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias