Cómo configurar una imagen de fondo en CSS »Wiki Ùtil
Crear un sitio web es una excelente manera de expresarse. Aunque existen muchas herramientas de creación de sitios web, escribirlo usted mismo es una forma divertida de aprender más sobre cómo funcionan los sitios web entre bastidores. Un buen proyecto para principiantes es crear un sitio web y agregar una imagen de fondo con CSS. Este proyecto lo pondrá en funcionamiento tanto con HTML como con CSS.
¿Qué es CSS?
CSS son las siglas de Cascading Style Sheet. Es un lenguaje de programación que le permite diseñar lenguajes de marcado. Uno de esos lenguajes de marcado es HTML o lenguaje de marcado de hipertexto. HTML se utiliza para crear sitios web. Aunque puede controlar parte del estilo del sitio web utilizando HTML, CSS ofrece muchas más opciones de control y diseño.
Creación de un sitio web básico con HTML
Dado que CSS es solo un lenguaje de estilo, para usarlo, primero necesitamos algo para diseñar. Un sitio web muy básico nos bastará para empezar a jugar con CSS. Nuestra página mostrará "Hola mundo".
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>En caso de que no esté familiarizado con HTML, repasemos rápidamente qué hacen todos los elementos. Como se mencionó, HTML es un lenguaje de marcado, lo que significa que usa etiquetas para marcar qué es el texto. Siempre que vea una palabra rodeada por <> , es una etiqueta. Hay dos tipos de etiquetas, una etiqueta que marca el comienzo de una sección usando <> y otra que marca el final de una sección usando </>. El texto dentro de una sección también está destinado a facilitar la visualización de esta distinción.
En nuestro ejemplo, tenemos cuatro etiquetas. La etiqueta html indica qué elementos forman parte del sitio web. La etiqueta de encabezado contiene la información del encabezado que no se muestra en la página, pero es necesaria para crear la página. Todos los elementos mostrados están entre las etiquetas del cuerpo . Solo tenemos un elemento mostrado, la etiqueta p . Le dice al navegador web que el texto es un párrafo.
Agregar CSS a HTML
Ahora que tenemos una página simple, podemos personalizar el estilo con CSS. Nuestra página es bastante simple en este momento, y no hay mucho que podamos hacer, pero comencemos haciendo que nuestro párrafo se destaque para que podamos distinguirlo del fondo agregando un borde.
<html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>
Ahora, nuestro párrafo estará rodeado por un borde negro. Agregar una descripción de estilo en CSS a nuestra etiqueta de párrafo le dijo al sitio web cómo diseñar el párrafo. Podemos agregar más descripciones. Aumentemos el espacio en blanco, o relleno, alrededor de nuestro párrafo y centremos nuestro texto.
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>
Nuestro sitio web se ve mejor, pero nuestro HTML comienza a verse desordenado con todas esas descripciones en la etiqueta de párrafo. Podemos mover esta información a nuestro encabezado. Nuestro encabezado es para la información que necesitamos para mostrar el sitio web correctamente.
<html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Ahora nuestro HTML es más fácil de leer. Notarás que tuvimos que cambiar algunas cosas. La etiqueta de estilo le dice al navegador web información de estilo, pero también qué estilo también. En nuestro ejemplo, hemos utilizado dos formas diferentes de decirle qué estilo. La p en la etiqueta de estilo le dice al navegador web que aplique ese estilo a todas las etiquetas de párrafo. La sección #ourParagraph le dice que solo aplique estilo a los elementos con el id ourParagraph . Observe que la información de identificación se agregó a la etiqueta p en nuestro cuerpo.
Importación de un archivo CSS a su sitio web
Agregar la información de estilo al encabezado hace que nuestro código sea mucho más fácil de leer. Sin embargo, si queremos diseñar muchas páginas diferentes de la misma manera, tenemos que agregar ese texto en la parte superior de cada página. Puede que eso no parezca mucho trabajo, puede copiarlo y pegarlo después de todo, pero crea mucho trabajo si desea cambiar un elemento más adelante.
En su lugar, mantendremos la información CSS en un archivo separado e importaremos el archivo para darle estilo a la página. Copie y pegue la información entre las etiquetas de estilo en un nuevo archivo CSS ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Luego, importe el archivo al archivo HTML.
<html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Agregar una imagen de fondo con CSS
Ahora que tiene una base sólida en HTML y CSS, agregar una imagen de fondo será pan comido. Primero, identifica a qué elemento quieres darle una imagen de fondo. En nuestro ejemplo, agregaremos un fondo a toda la página. Esto significa que queremos cambiar el estilo del cuerpo . Recuerde, las etiquetas del cuerpo contienen todos los elementos visibles.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Para cambiar el estilo del cuerpo en CSS, primero use la palabra clave body . Luego agregue llaves como hicimos antes {}. Toda la información de estilo para el cuerpo debe estar entre llaves. El atributo de estilo que queremos cambiar es background-image . Hay muchos atributos de estilo. No espere memorizarlos todos. Marque una hoja de referencia de propiedades CSS con atributos que desee recordar.
Después del atributo, utilice dos puntos para indicar cómo cambiará el atributo. Para importar una imagen, use url () . indica que está utilizando un enlace para apuntar a la imagen. Coloque la ubicación del archivo entre corchetes entre comillas. Finalmente, termine la línea con un punto y coma. Aunque los espacios en blanco no tienen significado en CSS, use sangría para facilitar la lectura de CSS.
Nuestro ejemplo se ve así:
Si su imagen no se muestra correctamente debido al tamaño de la imagen, puede modificar la imagen directamente. Sin embargo, existen atributos de estilo de fondo en CSS que puede utilizar para modificar el fondo. Las imágenes que son más pequeñas que el fondo se repetirán automáticamente en el fondo. Para desactivar eso, agregue background-repeat : no-repeat ; a tu elemento.
También hay dos formas de hacer que una imagen cubra todo el fondo. Primero, puede establecer el tamaño de fondo al tamaño de la pantalla con tamaño de fondo: 100% 100%; , pero esto estirará la imagen y puede distorsionarla demasiado. Si no desea que se modifiquen las proporciones de la imagen, también puede establecer el tamaño del fondo para cubrir . Cubrir hará que la imagen de fondo cubra el fondo, pero no distorsione la imagen.
Cambiar el color de fondo
Cambiemos una última cosa. Ahora que tenemos antecedentes, nuestro párrafo es difícil de leer. Hagamos que su fondo sea blanco. El proceso es similar. El elemento que queremos modificar es #ourParagraph. El # indica que "ourParagraph" es un nombre de identificación. A continuación, queremos establecer el atributo de color de fondo en blanco.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}
Mucho mejor.
Continuar diseñando su sitio web con CSS
Ahora que sabe cómo cambiar el estilo de diferentes elementos HTML, ¡el cielo es el límite! El método básico para cambiar los atributos de estilo es el mismo. Identifique el elemento que desea cambiar y describa cómo cambiar el atributo. La mejor manera de aprender más es jugar con diferentes atributos. Ponte a prueba para cambiar el color de tu texto a continuación.