2

Quiero cambiar el tamaño de la imagen de fondo para acomodarla al ancho de la página pero no sé si es posible. Éste es mi código:

#cabecera {
  min-height: 400px;
  background: url('https://placehold.it/1000x400') no-repeat 0;
  text-align: center;
  color: #fff;
}
<section id="cabecera">
  <div class="contenedor">
    <h1>Profesionales en tecnología de Desarrollo Web</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet unde perferendis repudiandae.</p>
  </div>
</section>

¿Cómo cambio el tamaño para que ocupe todo el ancho de la página una imagen como background?

2

3 respuestas 3

4

Te aconsejo separar la propiedad acortada background, que actualmente tienes así:

background: url('https://placehold.it/1000x400') no-repeat 0;

Y puedes dividirla de esta manera:

background-image: url('https://placehold.it/1000x400');
background-repeat: no-repeat;
/*Centramos el fondo al centro*/
background-position: center;
/*Y le decimos que siempre ocupe el ancho y el alto con esto*/
background-size: cover;

Y listo:

#cabecera {
  min-height: 400px;text-align: center;
  color: #fff;
  
  background-image: url('https://placehold.it/1000x400');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
<section id="cabecera">
  <div class="contenedor">
    <h1>Profesionales en tecnología de Desarrollo Web</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet unde perferendis repudiandae.</p>
  </div>
</section>

1

Hola me imagino que esa imagen de #cabecera es un banner de 1000x400 tu imagen debe estar ajustada al tamaño de tu ancho de contenedor para que se pueda apreciar bien y no tenga perdidas al momento de visualizar la página

1
  • Realmente esto no responde a la pregunta. La idea es que en un sistema que se adapte a diferentes resoluciones, la imagen no siempre va a tener el tamaño del contenedor. El banner es de 1000x400 porque yo le puse ese tamaño al azar como ejemplo.
    – Alvaro Montoro
    Commented el 3 abr. 2018 a las 20:38
-1

Puede ser que solo te hacía falta hacer más ancha la imagen con un witdh, ya si le quieres dar más diseño a la imagen para acomodarla puedes jugar con los margin-padding :

#cabecera {
    min-height: 400px;
    //Sólo pon esto
     width:100%;
   
    background: url('../img/HSTS-cabecera.jpg') no-repeat 0;
    text-align: center;
    color: #000;
    
}
<section id="cabecera">
        <div class="contenedor">
            <h1>Profesionales en tecnología de Desarrollo Web</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet unde perferendis repudiandae.</p>
        </div>
</section>

1
  • 3
    Esto realmente no responde a la pregunta. El usuario quiere ajustar la imagen de fondo al ancho total, con esta solución se le está diciendo a la #cabecera que ocupe todo el ancho, pero la imagen de fondo de #cabecera no tendría por qué ocuparlo.
    – Alvaro Montoro
    Commented el 2 abr. 2018 a las 1:29

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.