X Course Advisor FREE Course Advisor
Watch Tutorials

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!


首先要做的第一 - 我们需要一个图形的瓷砖!也许要做到这一点的最好的地方是 Photoshop中。您可以使用软化的图形,所以它会出现水印,一个标志,或你想什么。确保图形是不是太大,并保存为PNG,JPEG或GIF。现在,我们已经准备好使用它在我们的布局。




背景图像:网址(图像/ Background.png);



如果你想控制平铺的行为,您可以添加在“背景重复”属性。然后,您可以设置“重复”,“重复- X”,“重复- Y”或“不重复的值。” - X重复和重复- Y部队只能横向或纵向平铺,不重复,而不允许平铺。


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.