Ajuste de imagen
Sea cual fuese la forma en la que desees ajustar la imagen de la derecha deberías realizar algunos ajustes:
Reemplazar en la regla #right {}
:
#right {
...
background-position: cover;
}
Por esta otra:
#right {
...
background-position: center;
}
Dado que el valor cover
no es válida en la propiedad background-position
.
Ahora bien, ten en cuenta que la sintaxis de la propiedad anterior es:
background-position: x y;
Donde x
es la posición horizontal e y
es la posición vertical.
Eliminar la propiedad background-attachment: fixed;
de la regla antes mencionada.
Por último, podrías cambiar a la propiedad background-size
los valores 100% 100vh
por contain
o cover
según el ajuste que desee.
Caso 1:
Para el primer caso de ajuste de imagen tenemos el siguiente ejemplo:
section {
width: 100%;
height: 100vh;
display: flex;
}
#left {
background-color: rgb(239, 231, 226);
width: 50%;
font-size: calc(0.5rem + 0.5vw);
height: 100vh;
}
#right {
background-image: url(https://www.cic.es/wp-content/uploads/2018/05/industria-4.0-transformacion-digital.jpg);
/* Se reemplazó «cover» por «center» */
background-position: center;
background-repeat: no-repeat;
/* Se elimina esta propiedad: */
/* background-attachment: fixed; */
/* Se reemplazó 100% 100vh por contain
el primer caso */
background-size: contain;
width: 50%;
height: 100vh;
}
<section id="About-us">
<div id="left">
<h1>Hola</h1>
<p>My enterprise is a La mayoría de las veces, los elementos absolutamente posicionados que tienen su height y width establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados
se pueden crear para llenar el espacio vertical disponible, especificando tanto top como bottom, y dejando height sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto
left como right, y dando a width el valor de auto.</p>
</div>
<div id="right"></div>
</section>
Caso 2:
Para el segundo caso de ajuste de imagen tenemos el siguiente ejemplo:
section {
width: 100%;
height: 100vh;
display: flex;
}
#left {
background-color: rgb(239, 231, 226);
width: 50%;
font-size: calc(0.5rem + 0.5vw);
height: 100vh;
}
#right {
background-image: url(https://www.cic.es/wp-content/uploads/2018/05/industria-4.0-transformacion-digital.jpg);
/* Se reemplazó «cover» por «center» */
background-position: center;
background-repeat: no-repeat;
/* Se elimina esta propiedad: */
/* background-attachment: fixed; */
/* Se reemplazó 100% 100vh por cover
en el segundo caso */
background-size: cover;
width: 50%;
height: 100vh;
}
<section id="About-us">
<div id="left">
<h1>Hola</h1>
<p>My enterprise is a La mayoría de las veces, los elementos absolutamente posicionados que tienen su height y width establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados
se pueden crear para llenar el espacio vertical disponible, especificando tanto top como bottom, y dejando height sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto
left como right, y dando a width el valor de auto.</p>
</div>
<div id="right"></div>
</section>
Si desea profundizar sobre el tema puede consultar:
- background-position.
- background-size.
Pulse el enlace «Página completa» que se observa en la demo publicada acá.