Help with Photoshop

Darkst4r · 7 Mar 2012

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

reflux · 7 Mar 2012

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

Le_Petit_Lapin · 7 Mar 2012

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?

Participant · 7 Mar 2012

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.)

Sin_Chase · 7 Mar 2012

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

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.

Sin_Chase · 7 Mar 2012

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.