3

Lo que quiero lograr es este efecto, ósea tengo un div a la derecha con un texto , y una imagen a la izquierda pero la imagen se tendría que superponer o no se si seria la palabra, verse por detrás y a su vez el div de la derecha seria transparente, pero no lo puedo lograr ni aun hacer responsivo, se me ocurrió hacerlo con col-6 pero ya no se como hacer para que la imagen se pase mas a la izquierda

introducir la descripción de la imagen aquí

Se me ocurrio tambien algo asi:

<div class="row background-image">
<div class="text">
        <h3> texto</h3> 
</div>
</div>

En el css

 .background-image{ 
  background-size: cover;
  width: 50%;
  background-position-x: left; 
  background-repeat: no-repeat; 
  background-image: url('url');
 }   
 .text{
  background: #222222ad 0% 0% no-repeat padding-box; 
  height: 100%;
  margin-left: 40%;
} 

Pero igual no puedo hacerl que se haga responsivo.

3
  • La idea es que la imagen de la izquierda se corra mas a la derecha , se vea transparente en el otro div, y sea responisvo, por si no se entiende bien.
    – novatox
    Commented el 16 oct. 2021 a las 18:39
  • No acabo de comprender qué es exactamente lo que quieres. ¿Lo que quieres es que la imagen ocupe el ancho completo y el texto tenga un background con trasparencia y que ocupe sólo la mitad del contenedor?
    – Bettylex
    Commented el 16 oct. 2021 a las 18:45
  • Claro pero que la imagen se pase un poco para el brackground con transparencia
    – novatox
    Commented el 16 oct. 2021 a las 18:55

1 respuesta 1

4

Te dejo por aquí un ejemplo aproximado de lo que quieres. Creo que te has complicado muchísimo la vida para hacer algo que en realidad es muy sencillo.

.background-image{
  background-size: cover;
  width: 100%; /*el contenedor de la imagen ha de ocupar el 100%, además de especificar el cackground:cover */
  height: 100px;
  background-repeat: no-repeat; 
  background-image: url('https://images.fineartamerica.com/images-medium-large-5/starry-sky-on-the-pilatus-phil.jpg');
 }   
 .text{
  background: rgba(0,0,0,.5); 
  height: 100%;
  width: 50%; /*el texto ha de ocupar la mitad del contenedor*/
  color: #fff;
  margin-left: auto; /*un margin-left: auto hará que se mantenga siempre a la derecha*/
}
<div class="row background-image">
<div class="text">
        <h3> texto</h3> 
</div>
</div>

3
  • Claro esta muy bien el ejemplo, solo que la imagen no tiene que ocupar todo el anchi sino pasarse un 50px por ejemplo, lo mas dificil para mi es que sea responsivo
    – novatox
    Commented el 16 oct. 2021 a las 18:57
  • "responsive" pero siguiendo que layout ? que % debe ocupar la imagen de la derecha, en que resolucion minima y maxima debe trabajar ? Commented el 16 oct. 2021 a las 19:03
  • mínima 480 y máxima 1400, claro seria mientras se achica la pantalla se valla corriendo el brackground transparente si que se corra la imagen de la izquierda, bueno cuando llegue a 780 o 480 se tendría que centrar la imagen de fondo. Pero se me corre el texto cuando hacia eso
    – novatox
    Commented el 16 oct. 2021 a las 19:17

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.