Help with Photoshop

Associate
Joined
14 Apr 2009
Posts
1,058
Location
Bedford , United Kingdom
Hi, I'm trying to make a tiled background for a webpage and was wondering if theres an easy way to repeat a single tile in order to fill up a given sized area ?

I've designed a single small textured tile myself and just want to repeat it to cover a page.

Any help would be very much appreciated

Cheers
 
Soldato
Joined
15 Nov 2007
Posts
13,009
Location
Enfield
Pretty easy - select the tile area that you want to use using the marquee tool. Go to Edit>Define Pattern, name it and save. Then select the area you want to fill and go to Edit>Fill and select Pattern, then the pattern you just created :)
 
Soldato
Joined
13 Jan 2004
Posts
20,680
CSS

Example Page

ocuk_example1.html

Example Code
ocuk_example1.css
Code:
#bwtiled {
	width: 200px;
	height: 200px;
	background-image: url("images/bwtile.gif");
	background-position: left top;
	background-repeat: repeat;
	color: #0000ff;
	font-size: 2em;
}

ocuk_example1.html
Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="ocuk_example1.css">
<title>OcUK Repeating Background Example</title>
</head>

<body>

<div id="bwtiled">
<p>Hi I am a background-image tiled square!</p>
</div>

</body>
</html>

bwtile.gif

bwtile.gif


You have other options if you want it as an entire page background. Such as fixing it's position so it does not scroll with he page. All the CSS on the background property lives here:

http://www.w3schools.com/cssref/css3_pr_background.asp

If you want a specific area covered as a page background you will have to experiment, perhaps with a floating div stacked right to the background with the z-index property or clever use of margins.
 
Last edited:
Soldato
Joined
13 Jan 2004
Posts
20,680
Also, for a fixed size image in photoshop just lasso select your tile, Edit > Define Pattern and name it.

Select the Fill Tool, change 'Foreground' to 'Pattern', find and select your new pattern and fill away.
 
Top