Usar CSS para establecer una imagen de fondo

• Abril 27, 2024

¿Alguna vez se preguntó cómo los sitios web manejan esos bonitos diseños e imágenes flotando detrás del texto? Todo se hace a través de la magia de las hojas de estilo en cascada. CSS no solo le permite designar una imagen para el fondo de su página, sino que también le permite ajustar cómo se muestra la imagen, para que pueda obtener el aspecto que desea.

El elemento fundamental para su imagen de fondo es, adecuadamente, la propiedad 'background-image'. Utiliza esta propiedad para decirle a tu sitio dónde se encuentra el archivo de imagen, de la siguiente manera:

cuerpo {
background-image: url ("image.gif");
}

Eso es todo lo que necesita hacer para colocar una imagen de fondo para su página web. Por supuesto, es probable que desee personalizar la apariencia de la imagen. Supongamos que desea que su imagen comience en la parte superior de la página pero se centre horizontalmente en lugar de alinearse a la izquierda (la alineación predeterminada). En ese caso, querrá agregar la propiedad 'background-position' a su regla CSS:

cuerpo {
background-image: url ("image.gif");
posición de fondo: centro superior;
}

Al definir la propiedad 'posición de fondo', el primer valor establece la alineación horizontal (izquierda, centro o derecha) y el segundo establece la alineación vertical de la imagen (arriba, centro o abajo).

A continuación, decide que desea detener el mosaico de la imagen (repitiéndose) horizontalmente, aunque sí desea que se enlose verticalmente. Es hora de resaltar la propiedad 'background-repeat':

cuerpo {
background-image: url ("image.gif");
posición de fondo: centro superior;
background-repeat: repetir-y;
}

Establecer el valor en 'repetir-y' le dice al navegador que coloque en mosaico la imagen de fondo a lo largo del eje y, también conocido como vertical, pero no el eje x (horizontalmente), que es exactamente lo que queríamos. Si quisiera colocarlo en mosaico horizontal pero no verticalmente, usaría el valor 'repetir-x' en su lugar; Si no quería que la imagen se enlosara en absoluto, dele el valor 'no repetir'. El valor predeterminado es colocar la imagen en mosaico tanto horizontal como verticalmente, por lo que si esa es la mejor opción para su imagen, no necesita establecer la propiedad 'repetición de fondo'.

Finalmente, puede echar un vistazo a la propiedad 'background-attach'. De manera predeterminada, su imagen se desplazará a medida que se desplaza la página, por lo que si no repite la imagen verticalmente y tiene una página larga, su imagen no se extenderá hasta la parte inferior de la página. Puede cambiar esto estableciendo la propiedad 'background-attach' en 'fixed', lo que hace que la imagen de fondo permanezca en el mismo lugar en el monitor, independientemente de cómo se desplaza la página. Ahora sus reglas de imagen de fondo se verán así:

cuerpo {
background-image: url ("image.gif");
posición de fondo: centro superior;
background-repeat: repetir-y;
adjunto de fondo: fijo;
}


Si desea mantener sus reglas CSS lo más pequeñas posible, puede combinar todos sus valores de fondo en una línea utilizando la propiedad 'background', de esta manera:

antecedentes {
url ("image.gif") repetir-y fijo centro superior;
}

Cuando use la propiedad 'background' debe enumerar los valores en un orden específico:
[color de fondo (si se usa)] [imagen de fondo] [repetición de fondo] [adjunto de fondo] [posición de fondo]. Puede omitir cualquier valor que no necesite, solo necesita enumerar cualquier valor que use en el orden correcto o la regla no funcionará.

Instrucciones De Vídeo: Curso Basico de CSS - 6. Fondos (Abril 2024).