All Articles Web
Configuración de Fondos en mosaico uso de CSS
Geoff Blake on Wed, April 27th | 0 comments
Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are som

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Paso 1

Primero lo primero es - tenemos un gráfico en fichas! Probablemente el mejor lugar para hacerlo es en Photoshop . Puede utilizar un gráfico suavizado, por lo que aparecerá como una marca de agua, un logotipo, o en realidad cualquier cosa que quieras. Asegúrese de que el gráfico no es demasiado grande, y guardarlo como PNG, JPEG o GIF. Ahora estamos listos para utilizar en nuestro diseño.

Paso 2

A continuación, vamos a cargar la imagen en nuestra disposición a través de CSS. Esto va a requerir un poco de codificación manual, pero no es algo demasiado difícil de lograr. En primer lugar, encontrar la regla CSS que desea aplicar el fondo gráfico. Esto podría ser un selector ID que es el control de un elemento div, una regla de clase, o cualquier otra norma que pueda tener en su uso. En mi ejemplo, yo voy a aplicar un gráfico de fondo a un elemento del cuerpo redefinido.

Añadir en el "background-image" la propiedad, seguido por un punto y completo, a continuación, "url". A continuación, entre paréntesis, escriba la ruta de su gráfico, seguido por un punto y coma. Por ejemplo, aquí es como mi código es:

background-image: url (images / Background.png);

Tenga en cuenta que mi gráfica, "Background.png" se encuentra dentro de una carpeta llamada "imágenes". Asegúrese de guardar los archivos y ver tu trabajo en tu navegador. Observe cómo los azulejos gráfico de fondo por defecto. Podíamos dejar las cosas como son, o continuar para personalizar aún más las cosas con más propiedades CSS.

Paso 3

Si desea controlar el comportamiento de suelo de baldosas, se puede añadir en el "background-repeat" de propiedad. A continuación, puede establecer el valor a "repetir", "repeat-x", "repeat-y", o "no-repeat". Repeat-x y repeat-y la fuerza mosaico sólo horizontal o verticalmente, mientras que no se repita-no permite embaldosado.

Paso 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: