A menudo hace falta una renovación de la información de las propiedades más básicas. En este caso hablamos de imágenes de background y sus múltiples propiedades desglosadas.

  • background-color

    Modifica le color de la caja.

    .e1{ background-color: #c6ecae; }
    .e2{ background-color: #444444; }
    .e3{ background-color: transparent; }
  • background-image

    Añade una o varias imágenes de background a la caja. Si se usa un background-image múltiple se recomienda hacer los mismo con las otras propiedades de background (por ejemplo: background-repeat:repeat, repeat;).

    .e1{ background-image: url('imagen.gif'); }
    .e2{ background-image: url('image1.gif'), url('image2.gif'); }
    .e3{ background-image: none; }
  • background-repeat

    Control la diferentes manera de repetirse una imagen de background dentro de una caja.

    .e1{ background-repeat: no-repeat; }
    .e2{ background-repeat: repeat-x; }
    .e3{ background-repeat: repeat-y; }
    .e4{ background-repeat: repeat; }
    .e5{ background-repeat: space; }
    .e6{ background-repeat: space repeat; }
    .e7{ background-repeat: round; }
    .e8{ background-repeat: space round; }
  • background-size

    Controla las dimensiones de la imagen dentro de la caja.

    .e1{ background-size: auto; }
    .e2{ background-size: 100% auto; }
    .e3{ background-size: auto 100%; }
    .e4{ background-size: 100% 100%; }
    .e5{ background-size: 70px 20px; }
    .e6{ background-size: contain; }
    .e7{ background-size: cover; }
  • background-position

    Controla la posición de la imagen dentro de la caja.

    .e1{ background-position: left top; }
    .e2{ background-position: center top; }
    .e3{ background-position: right top; }
    .e4{ background-position: left bottom; }
    .e5{ background-position: center bottom; }
    .e6{ background-position: right bottom; }
    .e7{ background-position: 10px 30px; }
    .e8{ background-position: 12% 25%; }
    .e8{ background-position: 30px 40%; }
    .e9{ background-position: 50% 50%; }
    .e10{ background-position: 50% 75%; }
    .e11{ background-position: 100% 50%; }
    .e12{ background-position: 100% 100%; }
  • background-origin

    Controla el punto en que se ajusta la imagen dentro de la caja.

    .e1{ background-origin: content-box; }
    .e2{ background-origin: padding-box; }
    .e3{ background-origin: border-box; }

    Para este ejemplo tenemos que exagerar el border-width y añadiremos un padding de 10px:

  • background-clip
    .e1{ background-clip: content-box; }
    .e2{ background-clip: padding-box; }
    .e3{ background-clip: border-box; }

    Para este ejemplo tenemos que exagerar el border-width, añadiremos un padding de 10px, background-size: cover y background-position: 50% 50%:

  • background-attachment

    Para ver los efectos en este ejemplo tenemos que añadir dentro de la caja un texto en un div:

    .e1{ background-attachment: scroll; }
    .e2{ background-attachment: local; }
    .e3{ background-attachment: fixed; }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin lectus sit amet tortor varius, vitae ornare sapien pharetra. Phasellus eu leo vitae urna aliquet imperdiet.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin lectus sit amet tortor varius, vitae ornare sapien pharetra. Phasellus eu leo vitae urna aliquet imperdiet.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin lectus sit amet tortor varius, vitae ornare sapien pharetra. Phasellus eu leo vitae urna aliquet imperdiet.

Espero que esta guía para utilizar la propiedad de CSS background os sirva tanto cómo a mí.

Deja un comentario