Cómo agregar fondos CSS divertidos a sus sitios

Sep 13, 2025
Cómo
[dieciséis]

El tiempo fue un fondo de página web era una pequeña imagen de mosaico, y, a menudo, horrible, asaltando a todos los globos oculares de los visitantes. Hoy en día, los antecedentes forman la base de mucho diseño gráfico en línea.

Esta revolución en los orígenes en la Web ha sido impulsada por los avances en CSS. Las normas web ahora se permiten mucho más control, por lo que puede definir cuidadosamente la posición de un fondo, trabajar con gradientes y agregar múltiples fondos a un solo elemento.

La cubierta de todo en esta área requeriría un libro, por lo que hemos elegido algunos puntos de partida importantes para que usted vaya y el enlace de opción impar para explorar más. ¡Disfrutar!

Añadir fondos CSS a elementos de la página web

Los fondos CSS requieren la antecedentes Propiedad de taquigrafía, o el uso de propiedades más específicas, como (pero no limitadas a): color de fondo ; imagen de fondo ; posición de fondo ; tamaño de fondo ; repetición de fondo ; y accesorio de fondo . Estos se pueden definir para el fondo de la página web (a través de la cuerpo selector) o elementos de la página, como los encabezados, los divs, etc.

En el nivel más básico, podrías usar. antecedentes Para convertir una página roja: 

 Cuerpo {
 Fondo: Rojo;
 }

Ir un poco más avanzado, podría agregar una imagen que está centrada horizontalmente, 20px desde la parte superior de su contenedor, no repetida, y se fija en su lugar a medida que la página web se desplaza: 

 Cuerpo {
 ANTECEDENTES: URL (Image.png) Centro 20px sin repetición fija;
 }

An image as a background (note: avoid this low level of contrast in your own designs)

[dieciséis] Una imagen como fondo (NOTA: Evite este bajo nivel de contraste en sus propios diseños)

Si quisieras escribir eso sin usar antecedentes taquigrafía, se vería así: 

 Cuerpo {
 Imagen - Imagen: URL (Image.png);
 Posición de fondo: centro 20px;
 Repetición de fondo: sin repetición;
 Accesorio de fondo: fijo;
 }

Si desea agregar múltiples fondos a un elemento, puede seleccionar coma conjuntos de valores en la Declaración de CSS. Tenga en cuenta que cualquier elemento que se especifique primero esté en la parte superior de la pila, lo que significa que se mostrará "arriba" otros fondos. 

 Cuerpo {
 ANTECEDENTES: URL (Image.png) Centro 20px No-repetición fijo, URL (Image-2.png) Centro Centro No-repetición fijo;
 }

En este caso, una imagen aparece según en el ejemplo anterior, y el 'a continuación' directamente en el centro del área de contenido.

Cambiar el tamaño de las imágenes de fondo

Hasta ahora, hemos evitado tamaño de fondo . Pero eso es bastante importante, porque le permite controlar el tamaño de una imagen de fondo. Específicamente, puede definir las dimensiones horizontales y verticales de una imagen en píxeles o términos de porcentaje, tales como: 

 Tamaño de fondo: 200px 50px;

También hay dos valores de palabras clave, que se pueden usar en su lugar: Contiene y cubrir . Estos son ampliamente similares, al proporcionar una forma de escalar una imagen dentro del área de contenido de un elemento. La diferencia es que Contiene está diseñado para hacer una imagen lo más grande posible, a la vez que lo muestra todo dentro del área de contenido (lo que significa que generalmente obtiene brechas alrededor), mientras que cubrir Cubre completamente el área de contenido, pero puede dar lugar a algunas de las imágenes que no son visibles. Este último se usa comúnmente en los sitios que usan fotografías como fondos.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values

[dieciséis] CSS 'contiene' (top) versus valores 'cubierta' (parte inferior)

Tenga en cuenta que puede agregar tamaño de fondo a un antecedentes Definición de taquigrafía: colóquelo después de la posición de fondo Los valores, con una barra directa que separa los dos: 

 ANTECEDENTES: URL (Image.png) Center 20px / contenga no-repetición fija

Utilice imágenes de fondo de alta resolución de Retina

Al agregar fondos de Retina de alta resolución, tamaño de fondo También es útil para forzar tales imágenes para aparecer en el tamaño correcto.

Por ejemplo, imagina un div con un identificación de logo . Esto, adecuadamente, tiene un logotipo aplicado como fondo en CSS. Es 150 píxeles cuadrados, por lo que el CSS básico que usarías es: 

 #logo {
 Ancho: 150px;
 Altura: 150px;
 Fondo: URL (logo.png) sin repetición;
 }

La alta resolución complica las cosas. No queremos forzar el hardware más antiguo para cargar imágenes más grandes, por lo que debe usarse una consulta de medios para cargar el logotipo de mayor resolución solo en el hardware compatible. 

 @media (-Webkit-Min-Device-Pixel-Ratio: 2),
 (Min-Resolución: 192DPI) {
  #logo {
   Imagen - Imagen: URL ([email protected]);
  }
 }

El problema ahora es la imagen de alta resolución @ 2x es 300 píxeles cuadrados (ya que tiene el doble de la resolución del original), pero se usa como fondo para un contenedor cuadrado de 150 píxeles. Así que en este punto, solo ves un cuarto de ello.

A high-res image before a resize fix

[dieciséis] Una imagen de alta resolución antes de una solución de cambio de tamaño.

Esto se fija asignando un específico tamaño de fondo valor por #logo : 

 #logo {
 Ancho: 150px;
 Altura: 150px;
 Fondo: URL (logo.png) sin repetición;
 Tamaño de fondo: 150px 150px;
 }

The high-res logo, now snugly inside its container

[dieciséis] El logo de alta resolución, ahora cómodamente dentro de su contenedor.

Un método más moderno para trabajar con múltiples resoluciones de fondo y lograr el mismo resultado es CSS4's conjunto de imágenes : 

 #logo {
 Imagen-Imagen: Set de imagen (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  )
 }

Los beneficios de conjunto de imágenes son CSS más simples, y el agente de usuario que determina la imagen que debe utilizarse. El inconveniente es el soporte del navegador, en el momento de la escritura, sigue siendo incompleto. Visite esta página de prueba Para un medio rápido para verificar cómo los navegadores admiten la tarifa. (Esta es quizás por qué muchos diseñadores Use scripts para automatizar las imágenes de alta resolución. .)

Trabajar con canales alfa y degradados.

Nuestro consejo final en este ardiente rapido (en términos de tutoriales en el sitio web) El artículo se refiere a los canales y gradientes alfa. Cuando Internet se alimentó con vapor, a menudo tenías que los diseñadores utilizaban GIFs 'Tableros de ajedrez' para simular los canales alfa (cada otro píxel era transparente). Ahora, solo asignas colores en RGBA: 

 principal {
 Fondo: RGBA (255,255,255,0.7);
 }

En el ejemplo anterior, el fondo sería un 70 por ciento blanco, permitiendo que lo que se muestre a través de ella. Debe tener cuidado de conservar la claridad al usar fondos semitransparentes que están por encima de las imágenes complejas, pero pueden ser grandes para agregar interés visual a las páginas web.

Alpha channels, gradients, and some questionable colour choices

[dieciséis] Canales alfa, gradientes y algunas opciones de color cuestionables

De manera similar, los diseñadores web solían generar y eliminar los gifs de baldosas si querían un gradiente como fondo, pero tampoco es necesario, a menos que desee ir de fiesta como si fuera 1999. En estos días, querrás CSS3 gradiente lineal y degradado radial Propiedades, para las que define las direcciones y las paradas de color.

Aquí hay una regla CSS con un gradiente básico: 

 H1 {
 Fondo: degradado lineal (a la derecha, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Esto se aplicaría a los encabezados de nivel uno, dándoles un gradiente lineal que va de izquierda a derecha, comenzando con blanco sólido y terminando en blanco transparente.

Usando ángulos y topes de color múltiple, puede ir mucho, mucho más con gradientes. Para experimentar, intenta usar un photoshop. Generador de gradiente de CSS y examinar la salida del código (teniendo en cuenta que el ejemplo vinculado agrega la sintaxis para los navegadores más antiguos, solo agarre el gradiente lineal línea para su propio uso).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients

[dieciséis] Como muestra la galería de patrones de CSS, puede hacer cosas realmente elegantes con los gradientes de CSS

Si te apetece revisar lo que los profesionales web experimentados pueden hacer con los gradientes y tamaño de fondo , echa un vistazo a Lea Verou's Galería de patrones CSS3 . Allí encontrará un montón de ejemplos en vivo que usan gradientes de CSS para crear todo tipo de patrones de fondo seriamente impresionantes.

Y, sí, hay un indicio de dónde entramos con respecto a los asaltos de globo ocular en algunos de ellos.Pero como con todo, cuando se trata de antecedentes web, la clave es garantizar lo que agrega es relevante en el contexto de su diseño y, lo que es más importante, que los antecedentes no se distraen del contenido, o lo hacen ilegible.

Enlaces relacionados:

  • Una guía para escribir mejor CSS.
  • Crear un diseño sensible con la cuadrícula CSS
  • CSS trucos para revolucionar tus diseños.

Cómo - Artículos más populares

Cómo agregar animación a SVG con CSS

Cómo Sep 13, 2025

[dieciséis] [Imagen: Diseñador web] Cuando se trata de animar con SVGS, un desvío importante puede ser la idea de atascarse..

10 cosas que no sabías que podrías hacer con Photoshop

Cómo Sep 13, 2025

[dieciséis] Photoshop es un ejemplo perfecto de todo el ser mayor que la suma de sus partes, de las cuales hay muchos; Un tesoro rebos..

Cómo cambiar la fuente en su bio de Twitter

Cómo Sep 13, 2025

[dieciséis] Hay muchas personas en Twitter, 261 millones de cuentas de Twitter la última vez que revisamos. Y eso significa que puede..

5 maneras de aumentar el SEO de su sitio web

Cómo Sep 13, 2025

[dieciséis] SEO: Es un trabajo sucio, pero alguien tiene que hacerlo, y si quieres que alguien vea tu portafolio de diseño ..

Afila tu modelo de superficie dura en 3DS MAX

Cómo Sep 13, 2025

[dieciséis] En este tutorial, voy a compartir las técnicas y los métodos que uso para crear modelos de superficie dura en 3ds ..

Cómo hacer tus propios tableros de lienzo

Cómo Sep 13, 2025

[dieciséis] Hacer tus propios tableros de lienzo es divertido, rápido y puede ahorrarle dinero. También le brinda un producto superi..

Modelo Darth Vader en Zbrush

Cómo Sep 13, 2025

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

Cómo diseñar una promoción para una marca imaginaria

Cómo Sep 13, 2025

Al diseñar para una marca, ya sea que se haya establecido una o una puesta en marcha que esté tomando el cable creativo, la coherencia en todos los puntos táctiles es clave. ..

Categorías