estoy intentando abajo de mi navbar poner una imagen con full width y con un height de 500px con texto encima de la imagen responsive..
Llevo tiempo buscando como hacer que todo lo mencionado sea responsive ya que cuando lo intento hacer siempre en determinado tamaño se sale el texto de la imagen o se esconde.
imagen_inicio{
width: 100%; filter:brightness(0.5); height: 100%;; }
caja_imagen{
overflow: hidden;
height: 500px;
position: relative;
}
texto_encima{
position: absolute;
left: 0;
top: 5%;
margin-left: 300px;
margin-right: 160px;
text-align: center;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(132, 245, 142);
text-align: center;
}
<div id="caja_imagen">
<img id="imagen_inicio" src="/images/tipo-de-seguridad.jpg" alt="Responsive image" class="img-fluid" alt="">
<div id="texto_encima" class="text-center">
<h1>Bienvenido a Seguridad y Rastreo</h1>En Seguridad y Rastreo estamos comprometidos con el servicio al cliente. Estamos muy orgullosos de nuestra
atención y soluciones efectivas en seguridad. Cada cliente es atendido diligentemente y de manera personalizada.
Solo las empresas más comprometidas invierten tiempo en revisar y determinar las mejores alternativas, los
mejores métodos y los protocolos más efectivos. Nos ocupamos de su seguridad y protegemos lo que a usted más le
importa. <br>
</div>
</div>
`
/*Comentario*/
y/o//Comentario
es mejor si el código lo pones en la opción de fragmento de código para que así puedas reproducir el error aquí en la pregunta, sino siempre puedes usar un fiddle, Bienvenido Miguel aqui te dejo Cómo crear un ejemplo mínimo, completo y verificable. y ¿Cómo elaboro una buena pregunta?, saludos.background
en css de la etiqueta con el idcaja_imagen
y no como etiqueta deimagen
, ahora ¿Por que la altura debe ser de 500px? El texto es algo "liquido" en html, es decir ocupa espacio dependiendo del tamaño del contenedor a lo ancho, por lo que siempre es mejor usar porcentajes o una medida dinámica ¿Hay alguna razón para delimitarla a esa altura específicamente?