Tamaño de imagen de fondo "Background Images" en textos u otros elementos con CSS "background-size"

Ejemplo de visualización CSS background-size

HTML: Insertar imagen de fondo "Background Images" en elementos de section o div

En este ejemplo, insertamos una imagen de 1200x1200, aunque se puede insertar cualquier otra.

La clase de CSS "background-size" https://www.w3schools.com/cssref/css3_pr_background-size.asp, especifica el tamaño de las imágenes de fondo.

La clase de CSS "object-fit" https://www.w3schools.com/css/css3_object-fit.asp, especifica cómo un img o video debe cambiar de tamaño para adaptarse a su contenedor.

Ejemplo de código HTML + CSS background-size

<div id="background-images-example-001" style="
    background-color: #FFFFFF !important;
    background-image: url(https://dummyimage.com/1200x1200/f9ffc9/ccc) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: center center !important;
    z-index: auto;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
">
  <div class="contenido">
      <h2>HTML + CSS Style inline</h2>
      <p>HTML: Insertar imagen de fondo "Background Images" en elementos de section o div</p>
      <p>En este ejemplo, insertamos una imagen de 1200x1200, aunque se puede insertar cualquier otra.</p>
      <p>La clase de CSS "background-size" https://www.w3schools.com/cssref/css3_pr_background-size.asp , especifica el tamaño de las imágenes de fondo.</p>
      <p>La clase de CSS "object-fit" https://www.w3schools.com/css/css3_object-fit.asp , especifica especificar cómo un <img> o <video> debe cambiar de tamaño para adaptarse a su contenedor.</p>
  </div>
</div>

Compartir esta publicacion

Añadir un comentario