1

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>

`

5
  • 1
    Hola, bienvenido, deja el código de lo que estas intentando, sino es muy complejo ayudarte Commented el 4 oct. 2018 a las 4:07
  • Edite mi pregunta aun no entiendo como comentar el codigo.. Commented el 4 oct. 2018 a las 4:39
  • Puedes comentar el código como se hace de toda la vida, utiliza /*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. Commented el 4 oct. 2018 a las 4:58
  • Si la imagen la quieres de fondo, lo mejor es que la uses como background en css de la etiqueta con el id caja_imagen y no como etiqueta de imagen, 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? Commented el 4 oct. 2018 a las 15:05
  • el chiste es que la imagen no abarque tanto espacio height.. ya que abajo tendre otra seccion donde se mostraran los productos de dicha empresa.. el estilo que quiero es como este : tracktik.com/contact-us .. Gracias por sus respuestas(y) Commented el 5 oct. 2018 a las 2:52

1 respuesta 1

5

He cogido tu código y lo he cambiado hacia lo que creo que querías, si no he entendido mal querías que tu imagen se quedase como fondo y una buena manera es declarándola desde el css:

background: url("https://i.imgur.com/0r7qN8U.png") top center no-repeat;

La mejor manera de que este responsive es dándole porcentajes en vez de pixeles:

padding-right:15%;
padding-left:15%;

Así en cualquier pantalla mantendrá los margenes.

También he visto que tu css tenia duplicidades, anda con ojo en eso.

.imagen_inicio{
   width: 100%; 
   filter:brightness(0.5); 
   height: 100%; 
}

.caja_imagen{
   background: url("https://i.imgur.com/0r7qN8U.png") top center no-repeat;
   padding-bottom:100px;
   width: 100%;        
   overflow: hidden;
   height: 500px;
   position: relative;
}

.texto_encima{  
   padding-right:15%;
   padding-left:15%;     
   font-size: 30px;
   font-family: Arial, Helvetica, sans-serif;
   color: rgb(132, 245, 142);
   text-align: center;
}
.texto_parrafo {         
   padding-right:15%;
   padding-left:15%; 
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   color: rgb(255, 0, 255);
   text-align: justify;
}
<div class="caja_imagen img-fluid">
    <div class="texto_encima col-md-12">
      <h1>Bienvenido a Seguridad y Rastreo</h1>
    </div>
    <div class="texto_parrafo col-md-12"><p>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. </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.