Create pattern backgrounds for you website in Photoshop

This tutorial shows how to create background for your website in Photoshop and how to crop the images and prepare them for your website. Next we will style our html file and display our headers in browser. We are going to create 4 different header elements using patterns and filters.

HTML structure

CSS applied to display our backgrounds

* {margin: 0px;padding: 0px;} body {background-color: #222222;} #out1,#out2,#out3,#out4 {margin: 20px 0px;height: 100px;} #out1 {background: url(../images/bg1.png) repeat-x 0px 0px;} #out2 {background: url(../images/bg2.png) repeat-x 0px 0px;} #out3 {background: url(../images/bg3.png) repeat-x 0px 0px;} #out4 {background: url(../images/bg4.png) repeat-x 0px 0px;}

As you can see, this is dead simple structure. The only trick is to crop the images properly in Photoshop.

Screencast – How to create pattern backgrounds

[flashvideo file=”tuts/patterns_for_website/pattern.mov” title=”Create pattern backgrounds for you website in Photoshop” description=”This tutorial shows how to create background for your website in Photoshop and how to crop the images and prepare them for your website. Next we will style our html file and display our headers in browser. We are going to create 4 different header elements using patterns and filters.” tags=”pattern, website background, background pattern, photoshop pattern, horizontal repeat background” title=”Create pattern backgrounds for you website in Photoshop” image=”tuts/patterns_for_website/patterns_vid.jpg” /]

If you use different techniques, feel free to share them with us. Any comments welcome. PS. Sorry for my odd camera. (shift+cmd+c shortcut ;))

Create pattern backgrounds for you website in Photoshop

HTML structure

CSS applied to display our backgrounds

Screencast – How to create pattern backgrounds

Pawel Martuszewski