X Course Advisor FREE Course Advisor
Watch Tutorials
Setting Up Tiled Backgrounds Using CSS

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!

Step 1

First thing's first -- we need a graphic to tile! Probably the best place to do this is in Photoshop. You can use a softened graphic, so that it'll appear as a watermark, a logo, or really anything you'd like. Make sure the graphic isn't too large, and save it as a PNG, JPEG, or GIF. Now we're ready to use it in our layout.

Step 2

Next, we'll load the graphic into our layout via CSS. This'll require a little bit of hand coding, but it isn't anything too tricky to pull off. First, find the CSS rule that you'd like to apply the background graphic to. This could be an ID selector that's controlling a div element, a class rule, or any other rules you might have in use. In my example, I'm going to apply a background graphic to a redefined body element.

Add in the "background-image" property, followed by a full-colon, then "url". Then in brackets, type in the path to your graphic, followed by a semi-colon. For example, here's how my code looks:

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

Note that my graphic, "Background.png" is located inside a folder called "images." Be sure to save your files and preview your work in your browser. Notice how the background graphic tiles by default. We could leave things as they are, or continue to customize things further using additional CSS properties.

Step 3

If you'd like to control the tiling behavior, you can add in the "background-repeat" property. You can then set the value to "repeat," "repeat-x," "repeat-y," or "no-repeat." Repeat-x and repeat-y force tiling only horizontally or vertically, while no-repeat doesn't allow tiling.

Step 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!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.


You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.