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
 
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 :)
 
Not really sure why you would want to do it in Photoshop, surely if you have the tile you want to use, you just tile the damn thing in whatever webpage editor you're using?
 
Pros edit web pages using Notepad+. If that's the case he needs an image (unless CSS can do that? I know very little about web editing.)
 
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:
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.
 
Back
Top Bottom