Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (XV)

10.14. background-attachment

La propiedad background-attachment indica cuando la imagen de fondo queda fija o se mueve con el scroll de la página. Hacemos scroll cuando desplazamos la página con la barra lateral, o con el dedo en una pantalla táctil. Tiene estos valores scroll, fixed y local.

- scroll, la imagen de fondo se mueve junto con el resto de la página al hacer scroll. Es el valor por defecto.

- fixed, la imagen de fondo permanece fija al hacer scroll.

- local, si la imagen de fondo está dentro de un elemento que tiene su propio scroll, la imagen de fondo se moverá dentro de ese elemento al hacer scroll,

10.15. background-size

Permite recalcular el tamaño de la imagen de fondo dinámicamente. Podemos hacerlo de dos formas, con los valores auto, cover y contain; o con los valores de ancho y alto en pixels.

1- auto, la imagen se muestra con su tamaño original. Es la opción por defecto.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

2- cover, hace lo necesario para que la imagen ocupe todo el contenedor. Si la imagen es más pequeña, la redimensiona; si es más grande la recorta.

3- contain, la imagen se verá completa, con sus proporciones originales. Si es necesario, repetirá la imagen, vertical y horizontalmente.

4- ancho y alto, damos dos valores de longitud para fijar el ancho y el alto de la imagen. Por ejemplo, en este caso: background-size: 300px 225px

Enero-2019 (V 2.0)

Pág. 10.15

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies