I want to resize the background image to fit the width of the page but I don't know if it's possible. This is my code:
#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>
How do I resize an image as a background to fill the full width of the page?
I advise you to separate the shortened background property, which you currently have like this:
And you can split it like this:
And ready:
Hello, I imagine that the #header image is a 1000x400 banner. Your image must be adjusted to the size of your container width so that it can be seen well and there are no losses when viewing the page.
It may be that you just needed to make the image wider with a
witdh
, and if you want to give the image more design to accommodate it, you can play with themargin-padding
: