1

Cómo puedo crear la imagen de fondo transparente o opacar la imagen de fondo al cambiar el tamaño de pantalla entre un menor de 500px en una plantilla responsive sin que afecte al contenido del texto.

Es decir que no llegase a opacar el texto.

#squares {
    height: auto;
    min-height: 850px;
    background-image: url(http://previews.123rf.com/images/peshkova/peshkova1305/peshkova130500363/19833522-empresario-de-pie-sin-rostro-sobre-un-fondo-gris-Foto-de-archivo.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
}

.squares h2 {
    padding-top: 50px;
    text-align: center;
    letter-spacing: .65em;
    margin-right: -0.65em;
    font-size: 10px;
}

.squares h3 {
    text-align: center;
    padding-top: 10px;
    margin-bottom: 110px;
    font-size: 30px;
}
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 1200px)
.maximum {
    float: left;
    width: 100%;
}

@media (min-width: 768px)
.container {
    padding-left: 50px;
    padding-right: 50px;
}
<div id="squares">
  <div class="maximum squares">
<h2>TITLE TILTLEMTITLE</h2>
<h3>SUBTITILE SUBTITLE subtitle</h3>
  </div>
  <div class="container">
<div><h1>TITLE AND TITLE</h1></div>
  </div>
</div>

3
  • No me queda muy claro qué es lo que buscas. ¿A qué te refieres con opacar la imagen?¿Y quieres que ocurra a partir de 500px o menos de 500px o en algún rango en particular?
    – Alvaro Montoro
    el 14 feb. 2017 a las 16:03
  • Hola @AlvaroMontoro bueno creo que es el término correcto opcar o cómo se dice a una imagen con su color verdadero pase a ser más claro o transparente al valor verdadero(o la imagen con sus colores natural). Realmente esta no es la imagen que poseo realmente tengo una similar pero con el personaje al centro... Entonces el problema que causa es que cuando la plantilla llega a un responsive menor de 500px el texto no se llega a ver por la imagen del personaje que se encuentra en el centro.
    – Otto
    el 14 feb. 2017 a las 16:12
  • @AlvaroMontoro Una de las soluciones creentemente es opcar o hacer más claro la imagen o transparente al cambiar el tamaño de la pantalla a un menor de 500px...
    – Otto
    el 14 feb. 2017 a las 16:13

1 respuesta 1

1

No puedes cambiar la opacidad de la imagen de fondo sin afectar la opacidad del contenido del div. Una posible solución sería mover la imagen de fondo del div a un pseudo-elemento que ocupe todo el tamaño del contenedor. Entonces usando media queries podrías cambiar la opacidad sólo de ese pseudo-elemento en particular (la imagen de fondo) sin afectar a la opacidad del texto.

Algo como esto (comentado):

#squares {
  height: auto;
  min-height: 850px;
  position:relative; /* ponemos posicion relativa */
}

/* Movemos la imagen de fondo al ::beofre */
#squares::before {
  content:"";
  background-image: url(http://previews.123rf.com/images/peshkova/peshkova1305/peshkova130500363/19833522-empresario-de-pie-sin-rostro-sobre-un-fondo-gris-Foto-de-archivo.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

.squares h2 {
  padding-top: 50px;
  text-align: center;
  letter-spacing: .65em;
  margin-right: -0.65em;
  font-size: 10px;
}

.squares h3 {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 110px;
  font-size: 30px;
}
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1200px) {
  .maximum {
    float: left;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* cuando el ancho sea menor de 500 pixels */
@media (max-width: 500px) {
  /* el ::before tendra una opacidad menor */
  #squares::before {
    opacity:0.2;
  }
}
<div id="squares">
  <div class="maximum squares">
    <h2>TITLE TILTLEMTITLE</h2>
    <h3>SUBTITILE SUBTITLE subtitle</h3>
  </div>
  <div class="container">
    <div><h1>TITLE AND TITLE</h1></div>
  </div>
</div>

1
  • Perfecto tal como lo deseaba. Gracias.
    – Otto
    el 14 feb. 2017 a las 18:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.