Image with text over responsive with full width in the image with height 500px

Question

Image with text over responsive with full width in the image with height 500px

Navigation

#1 by (1 votes)

1

I am trying below my navbar to put an image with full width and a height of 500px with text on top of the responsive image ..

I have been looking for how to make everything mentioned responsive because when I try to always do it in a certain size, the text of the image comes out or it is hidden.

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>

'

html css imagen responsive

asked by Miguel Angel Preciado Mendoza 04.10.2018 в 06:05

source

1 answer

Recognize words in python Reduce Button spaces in Table

score 1 · Answer 1

I have taken your code and I have changed it to what I think you wanted, if I did not understand wrong you wanted your image to remain as background and a good way is declaring it from the css:

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

The best way that this responsive is giving you percentages instead of pixels:

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

This will keep margins on any screen.

I have also seen that your css had duplicities, go with an eye on that.

.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>