Cómo Poner Una Imagen De Fondo en CSS
CSS es un lenguaje utilizado para diseñar documentos estructurados como sitios web. Utilizar imágenes en este lenguaje es una excelente manera de aplicar un fondo personalizado a tu sitio web. A continuación, aprenderás cómo contrarrestar una imagen de fondo de CSS:
Paso 1: Prepara tu imagen
- Escoge una imagen que se adecúe para tu proyecto.
- Asegúrate que los colores en la imagen sean claros y nítidos.
- Usa un archivo de imagen con formato jpg, png o gif.
Paso 2: Inserta la Imagen
Agrega la imagen a una carpeta en tu proyecto. Usa la dirección a tu imagen para insertarla en el archivo style.css:
background-image:[dirección de tu imagen/ imagen.jpg]
Paso 3: Redimensiona tu Fondo
Puedes usar las etiquetas background-size y background-repeat para adaptar la imagen a tu pantalla.
background-size:cover; background repeat: no-repeat;
Paso 4: Muestra La Imagen de Fondo
Para mostrar la imagen, debemos usar la etiqueta background-position. Ésta puede tener distintos valores desde pré definidos hasta establecer unos valores específicos:
background-position: left
De aquí en adelante, la imagen de fondo será visible y completamente personalizada.
¡Ahora estás listo para mostrar una imagen de fondo de CSS!
¿Cómo colocar una imagen de fondo en CSS?
1. Utiliza la propiedad CSS background-image. Si deseas establecer una imagen como fondo de una página web o un elemento HTML, en lugar de simplemente insertar la imagen, tendrás que utilizar la propiedad CSS background-image, la cual es el reemplazo del atributo background-image en versiones anteriores de HTML.
Sintaxis:
background-image: url(url de la imagen);
Ejemplo:
body{
background-image: url(‘background.jpg’);
}
Con esto tu imagen de fondo aparecerá como fondo de todo el contenido de tu página web.
¿Cómo poner una imagen en el fondo HTML?
Para añadir una imagen de fondo en una página web, hay usar la propiedad background-image seguida de un valor, en este caso la URL de la imagen que vamos a usar de imagen de fondo. La declaración quedaría algo similar a esto: background-image: url(«/nombre-de-la-imagen. png»);
Nota: las imágenes siempre tienen que estar en el mismo directorio del archivo HTML, o se debe especificar alguna ruta relativa (por ejemplo: ruta-relativa/imagen.png).
Ejemplo:
Con esto tu imagen de fondo se verá en pantalla cuando cargues la página web.
Cómo incluir una imagen de fondo en CSS
Usando el atributo «background»
- Agrega el atributo «background» a la regla de estilo de un elemento en el archivo CSS.
- Seleccione la imagen de fondo deseada de su computadora.
- Coloque la dirección de esta imagen en formato URL dentro del atributo «background».
Ejemplo:
body
{
background: url(imagen.jpg);
}
Usando el atributo «background-image»
- Agrega el atributo «background-image» a la regla de estilo de un elemento en el archivo CSS.
- Seleccionar la imagen de fondo deseada de su computadora.
- Coloque la dirección de esta imagen en formato URL dentro del atributo «background-image».
Ejemplo:
body
{
background-image: url(imagen.jpg);
}
Usando el atributo «background-position»
- Agregar el atributo «background-position» a la regla de estilo de un elemento en el archivo CSS.
- Seleccionar la imagen de fondo deseada de su computadora.
- Coloque la dirección de esta imagen en formato URL dentro del atributo «background-image».
- Especificar la posición deseada para la imagen de fondo, usando las mismas reglas que para el atributo «background-position».
Ejemplo:
body
{
background-image: url(imagen.jpg);
background-position: center;
}
¡Espero que estas instrucciones sean útiles para ti y que puedas agregar una imagen de fondo a tus proyectos CSS!