1

Hola tengo un inconveniente estoy intentando poner una imagen de fondo , pero al colocar el color en una parte me pone un excedente el cual no es lo deseado utilice un psedoelemento before para colocar el fondo pero no se como pudiera corregir ese pequeño error adjunto mi Html y css y un capture con el problema

introducir la descripción de la imagen aquí


Código html :

 <div id=imagen>
     <p>fgfh<p>
     </div>
<div class="card">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>

<style>
#imagen{
   background-image: url(http://localhost/wordpress/wp-content/uploads/2021/09/factores-a-considerar-escuela.jpg);
  
   height: 200px;
   width: 350px;
   
}
#imagen:after{
  
    content: '';
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   
    background-color: rgba(210,223,33,0.9);
}
.card {
 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width:350px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container 
height: 200px;    
  padding: 2px 16px;
}
</style>

introducir la descripción de la imagen aquí

lo que necesito corregir es ese excedente que esta señalado lo quiero quitar

1
  • si ese es el codigo html el problema que tengo es que el color de fondo de la imagen se pasa del tamaño de la imagen y crea un excedente en la parte inferior Commented el 4 oct. 2021 a las 17:09

3 respuestas 3

1

Simplemente define en el elemento after una medida especifica similar a la de la imagen, no definas 100% de alto o ancho, define por ejemplo:

#imagen::after{  
    content: '';
    position:absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 350px;  
    background-color: rgba(210,223,33,0.3);
}

[1]: https://i.sstatic.net/6XIV7.png

3
0
<style>
#imagen{
   background-image: url(http://localhost/wordpress/wp-content/uploads/2021/09/factores-a-considerar-escuela.jpg);
  
   height: 200px;
   width: 350px;
   
}
#imagen:after{
  
    content: '';
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   
    background-color: rgba(210,223,33,0.9);
}
.card {
 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width:350px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container 
height: 200px;    
  padding: 2px 16px;
}
</style>

Luego dentro de tu body

<div id=imagen>
    
<div class="card">
  <div class="container">
    <h4><b>John Doe</b></h4> 
    <p>Architect & Engineer</p> 
  </div>
</div>
</div>

Por favor intenta

5
  • Si esto no soluciona tu problema, por favor intenta explicarnos con más detalles lo que deseas obtener.
    – Lilibeth
    Commented el 4 oct. 2021 a las 17:15
  • ok listo ya lo intento Commented el 4 oct. 2021 a las 17:15
  • no me funciono ya te explico en si que es lo que necesito Commented el 4 oct. 2021 a las 17:16
  • Estas utilizando bootstrap?
    – Lilibeth
    Commented el 4 oct. 2021 a las 17:16
  • no lo estoy haciendo en html y css Commented el 4 oct. 2021 a las 17:17
0

La solución que plantea Jorgesys es lo que necesitas, pero aun debes retocar algunas cosas. Si yo fuera tu lo haría de la siguiente manera:

 <style>
        body {
            background-color: #222;
            font-family: Arial, Helvetica, sans-serif;
        }
        .card {
            background-image: url(https://www.collinsdictionary.com/images/thumb/school_309241295_250.jpg);
            background-size: cover;
            overflow: hidden;
            width: 350px;
            background-color: #FAFAFA;            
            border-radius:5px;
            -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.46); 
            box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.46);
        }
  
        .card .card-header {
            background: rgba(210,223,33,0.7);
            overflow: hidden;
            height:200px;
            z-index: 2;
        }
        .card .card-body {
            padding: 10px;
            background:#FFF;
        }
    </style>
  <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
            <h3>John Doe</h6>
            <p>Architec & Enginer</p>
        </div>
    </div>

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.