Create repeating / tiled background images

I may have missed this in the previous versions of Adobe Photoshop.
Is there "a way / or method" to create repeating / tiled background images in photoshop?
Many times a "tile" for a tiled background is quite small at around 150px x 150px.
1:
It would be very nice to be able to work on the tile, be able to zoom in and out of it, and actively see a functioning live tiled background.
Yes it might be a bit like a kaleidescope, but it would be live and you would see any harshness in the pattern and can remedy glitches it in real time.
2:
It would also be very nice to be able to "draw / paint / edit" off the edge of the tile and have the effect carried over to the other side...
Yes just like in Asteroids.
I think creating Tiled BG's is a very strong contender for being one of the more frustrating things I do with Photoshop. I hope the above ideas can be added to PS6.
Just to you you know... DPaint IV for the Amiga did this very well back in 1990'ish.

There will not be any substantial changes to CS6 to add new features beyond the beta. We are too far along in the process for that. To accomplish what you desire, can you use the pattern feature to tile? For any new features you wish to request, you can to to this website http://feedback.photoshop.com/photoshop_family people can vote on the favorite features.
Pattie
Use the Rectangle Marquee tool on any open image to select an area to use as a pattern. Feather must be set to 0 pixels. Note that large images may become unwieldy.
Choose Edit > Define Pattern.
Enter a name for the pattern in the Pattern Name dialog box.

Similar Messages

How to repeat a background image to cover the height of the page?

Hi
I have a page with an image alinged to the top in a table and
I have a pattern in the background of the cell in the same table
I need that background of the cell to repeat it self along
the height of the page, so when someone views the page at a higher
resolution, the background image will repeat it self to cover the
extra space.
I've tried setting the height of the table to percentage, but
the table doesn't cover the height of the page.
I could also make the table really long so when viewed at
higher resolution there wont be any blank space at the bottom, but
this makes an unnecessary and long scroll when viewed at lower
resolution.
Someone told me to use css but i have now idea how to
implement that.

make sure you have set your page margins to 0 if you don't
want the default
margin top left. Cut and paste the following into the head of
your document
just before the closing </head> tag.
then if you want to repeat a background image in a cell, you
need to create
a rule to do this:
.cellback {
/*this repeats the image across the page horizontally*/
/* if you want to repeat down the page, then change to
repeat-y */
background: url(pics/whatever.gif) repeat-x;
you can combine this background image rule with the other
margin setting so
you have:
<style type="text/css">

</style>
You then apply to the class to your cell
<td clas="cellback">
Examples here:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/cellbackground.htm
this shows how to use a background image for your entire
page:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplehor.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
> I have a page with an image alinged to the top in a
table and I have a
> pattern
> in the background of the cell in the same table
> I need that background of the cell to repeat it self
along the height of
> the
> page, so when someone views the page at a higher
resolution, the
> background
> image will repeat it self to cover the extra space.

Template Problem: Tiling background image gone and duplicate .swf headers

Problem 1: I have been working with a template, and creating
new files from the template without incident. Recently I created a
new file from the template and found that the tiling background
image (dots appearing on the right and left of the page) was gone.
The tiling image is present in the template, but not in files
created from it. Any guess how I broke that?
Problem 2: In my template I have an editable region wherein I
can place a .swf animation. When I upload my page made from the
template, a pair of .swfs appear stacked on top of each other, not
just the single .swf graphic. Any guess what I am doing wrong
there?
The problem page can be viewed here (
Shop
Page), and the template files are located here (
Template
right-click and Save-As).
I appreciate any help you can offer.
*Using Dreamweaver CS3 on Mac OS 10.5.2

> Regarding that tiling image problem? the image in my
template file has a
> relative address, but when I make a new file from the
template the
> location of
> the image is absolute, and points at my computer.
This will ALWAYS happen when one of the following obtains:
1. The linked file is OUTSIDE the root of the current site.
2. DW *THINKS* that the linked file is OUTSIDE the root of
the current site
(how could this happen? Here's a for example - the path to
the root folder
looks like this -
C:\whatever\joe's files\blah blah blah\thefilename.jpg
Fix either of those issues, and the problem will go away.
Might that be your problem?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"adam@blueapplestudio" <[email protected]>
wrote in message
news:fuo8dk$8sh$[email protected]..
> Thanks to the newsgroup users who have helped out with
this. I will be
> getting
> a newsreader soon, as the Adobe forum seems to be a bit
flawed.
>
> Regarding that tiling image problem? the image in my
template file has a
> relative address, but when I make a new file from the
template the
> location of
> the image is absolute, and points at my computer. This
seems to fix it:
>
> Open the template and make a new file from the template.
> Make a minor change to the template, save, and update
all linked files.
> Undo the change just made to the template, save and
update again.
>
> If you look at the new file-from-template you will find
the file needs to
> be
> saved (as denoted by the asterisk by its name) and the
tiling background
> is now
> corrected.
>
>

How can I create a single background image for a BorderLayout?

I can create a background with an image file for the individual panel (North, West, Center, East and South) in a BorderLayout, but I've been spinning my wheel for a long while now trying to figure out how to create just one background with a single image file for all of these panels?
In my application, a panel may contain various buttons, a listbox, a group of checkboxes, a combo box, or a canvas. Even if I used the same image file, when the panels are finally put together, one can clearly see that the end product is the result of a lot of patch works.
Hope someone has an answer for this. BTW, I'm using AWT because it works with existing browsers without the need for a separate Java plug-in.
Regards,
V.V.

Look at this :
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import java.awt.image.BufferedImage;
public class PanI extends Frame
     Image map;
     Panel pan;
     myPan p8,p4,p6,p2,p5;
     BufferedImage I;
public PanI()
     addWindowListener(new WindowAdapter()
    {     public void windowClosing(WindowEvent ev)
          {     dispose();
               System.exit(0);}});
     map = getToolkit().getImage("map2.gif");
     MediaTracker tracker = new MediaTracker(this);
     tracker.addImage(map,0);
     try   {tracker.waitForID(0);}
     catch (InterruptedException e){}
     I = new BufferedImage(1,1,BufferedImage.TYPE_INT_ARGB);
     setBounds(10,10,map.getWidth(null)+8,map.getHeight(null)+27);
     setLayout(new BorderLayout());
     pan = new Panel();
     add(pan,BorderLayout.CENTER);
     pan.setLayout(new BorderLayout());
     pan.setSize(map.getWidth(null),map.getHeight(null));
     p5 = new myPan(5);
     p5.setBackground(Color.red);
     pan.add(p5,BorderLayout.CENTER);
     p8 = new myPan(8);
     p8.setBackground(Color.orange);
     pan.add(p8,BorderLayout.NORTH);
     p4 = new myPan(4);
     p4.setBackground(Color.blue);
     pan.add(p4,BorderLayout.WEST);
     p6 = new myPan(6);
     p6.setBackground(Color.green);
     pan.add(p6,BorderLayout.EAST);
     p2 = new myPan(2);
     p2.setBackground(Color.pink);
     pan.add(p2,BorderLayout.SOUTH);
     setVisible(true);
public class myPan extends Panel
     int where;
public myPan(int i)
     super();
     where = i;
public void paint(Graphics g)
     if (I.getWidth(null) != pan.getWidth() || I.getHeight(null) != pan.getHeight())
          I = new BufferedImage(pan.getWidth(),pan.getHeight(),BufferedImage.TYPE_INT_ARGB);
          Graphics      G = I.getGraphics();
          G.drawImage(map,0,0,pan.getWidth(),pan.getHeight(),null);
          G.dispose();
     int x1=0;
     int x2=getWidth();
     int y1=0;
     int y2=getHeight();
     if (where == 8)
     if (where == 2)
          y1 = p8.getHeight()+p5.getHeight();
          y2 = getHeight()+y1;
     if (where == 4)
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     if (where == 5)
          x1 = p4.getWidth();
          x2 = x1+getWidth();
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     if (where == 6)
          x1 = p4.getWidth()+p5.getWidth();;
          x2 = x1+getWidth();
          y1 = p8.getHeight();
          y2 = y1+getHeight();
     g.drawImage(I,0,0,getWidth(),getHeight(),x1,y1,x2,y2,null);
public void update(Graphics g)
     paint(g);
public static void main (String[] args)
     new PanI();
Noah

Creating a centering background image

I would like to have a background like this page. http://www.atlantafalcons.com/MediaLounge/VideoLanding.aspx?q=Falcons+First+Take
As you can see it centers itself. I checked out the code and did not see anything about centering. Here it is.
</head>
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
<div id="wrapper">
Any ideas?
SH

JCellini wrote:
They used a text-align: center declaration in the body rule
body {
    margin: 0;
    padding: 0;
    text-align:center;
    font:11px Arial, Verdana, sans-serif;
    color:#000;
    background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
Actually that is calling a different image and it's this line that centers that particular background:
background:#bd0d18 url(/media/backgrounds/bg_page.jpg) no-repeat center top;
However, not even sure where it's used... this is the direct link to that image:
http://www.atlantafalcons.com//media/backgrounds/bg_page.jpg
This is the actual bg image used on the page:
http://www.atlantafalcons.com/~/media/5C0943272C2443F4801646B2B490AF41.ashx
and in the code:
<body class="multiMedia" style="background-image:url(/~/media/5C0943272C2443F4801646B2B490AF41.ashx); background-color: #b88035;">
They haven't used any positioning on that image however. Starts at top 0 left 0.

How do I create a common background image in Pages?

The Pages Help has NO RESULTS for "common background". The support site:
http://www.apple.com/support/pages/setup/
has a link to this (http://docs.info.apple.com/article.html?path=Pages/2.0/en/slng411.html ) but the link is dead.
Grumbles:
This "discussions" change is awful. The frame scroll is a pain. Doesn't Apple know iframes are unsupported now in HTML 4 Strict? The "more options" search found no results for this topic. It DID find lots of results for "crashed" and "quit unexpectedly". Here's hoping Apple knows the database doesn't work and can fix it. The "Product" drop list below is not alphabetical.

I agree that the forum changes are not all to the better and nowhere where we can tell our views about it.
About the Background. If you use the Pages User Guide and search for background you'll find the answer.
Pages User Guide is free to download and use from the Help menu in your Pages application.
Profile on products will be added in the post if one uses the Advanced reply option

Need to create a background image for Joomla

I need to create a custom background image for a Joomla site.
Can anyone offer a simple tutorial on the steps I need to take to create the image?
Thanks

Okay. The image has a gold gradient from top to bottom, but the text repeats in smaller blocks.
First, you need a tiling image of some text, on a transparent background. Then, this image needs to be added as a pattern in Fireworks.
Next, you get to use your new pattern. In your document, create a tall rectangle with a vertical gradient. Make this image the same width as your tiling pattern, so that your resulting background image will also tile. Over that you put a rectangle with no color fill, but fill it with the text pattern. Save this working Fireworks document, then export to use on the Web.
I don't understand the phrase "I need to know how to size the image, possibly with CSS." Background images are the size they are. When this image is set to be the background, then it should be specified to repeat in the horizontal direction (repeat-x).
Here's some info on making a seamless tile:
http://forums.adobe.com/message/2384441
Using patterns:
http://www.entheosweb.com/fireworks/patterns.asp
There have been some recent threads on using gradients, just flip back a page or two (unless my mind's playing tricks on me and they're older).
Hmm... Possibly helpful:
http://spectrum.troy.edu/~techtip/classes/tutorials/fireworks/fw2004/gradient/gradient.htm

How to add a link in a header created only of a background image

Hi, I created my website with CSS in Dreamweaver. Here is a sample page:
http://www.bfranklincrafts.com/NewSite/BonneyLCalendar.html
The header is created with a background image. How do I put in a link in the header that when they click on Ben Franklin Crafts & Frames would take them to the home page? I have nothing to attach my link to?!?!
Thanks.
Liolee

Putting a clearpixel or transparent.gif over your background image won't work very well if CSS is turned off.
My preference would be to take your Business Name out of the background image and replace it with real text inside an <h1> tag in the foreground - where it will be visible to search engines, screen readers and translators.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How to create a scaled page background image?

Hi - does anyone know of a way of creating a page background image which will scale to fit any screen width? I've tried googling it, but get back so many complicated explanations that I don't know which to believe. Up until now I've resorted to creating a large image, usually around 1700 x 1400px, which just about works, but obviously smaller screens lose a lot of it. I'd really like to understand how to do this properly,
Thanks
SW

How far back in browser version history do you want to support?
IE9+ and any modern browser (like Firefox, Safari, Chrome and Opera) will work with the background-size:cover attribute:value in CSS3: http://www.w3schools.com/cssref/css3_pr_background-size.asp
For older browsers, you'll need a bit more complicated solution using javascript like this page: http://louisremi.github.io/jquery.backgroundSize.js/demo/

Repeating background images in tables

I am working on a web page with a background image in a
table. I have also inserted a table inside this same table to
include some text. When I preview this in Netscape/Firefox and
increase the text size a couple of times from the browsers menu,
the table with the image starts repeating as the text increases in
size. I don't mind the text changes sizes, but is there a way to
stop the table from repeating the background image? This is a
problem since the repeating image looks terrible.

On that page, change this -
</head>
to this -
<style type="text/css">
table.special { background-repeat:no-repeat; }
</style>
</head>
and then change your table tag from this -
<table width="100%" height="606" border="0" align="center"
cellpadding="0"
cellspacing="0">
to this -
<table width="100%" border="0" align="center"
cellpadding="0"
cellspacing="0" class="special">
(there is no table height attribute - it's invalid HTML)
> b, be too small, dependent upon which browser they are
viewed in.
Impossible. A background image will not change size in
different browsers.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"chimesey" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Use CSS -
>
> table { background-repeat:no-repeat; }
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
> I am trying to do the same thing, and my bg images seem
to either
> a, repeat somewhat
> or
> b, be too small,
> dependent upon which browser they are viewed in.
>
> I will try to use the code suggested above, but where
exactly would I
> insert
> it?
> This is the code for the 'table within the table'...
>
> <table width="100%" height="606" border="0"
> align="center" cellpadding="0" cellspacing="0">
> <tr>
> <th width="35%" height="95"
> scope="col"><h1>ten</h1></th>
> <th width="26%"
scope="col"><h1>year</h1></th>
> <th width="39%"
scope="col"><h1>plan</h1></th>
> </tr>
> <tr>
> <td height="325"><table width="100%"
height="266"
> border="0" cellpadding="0" cellspacing="0">
> <tr>
> <th scope="col"> </th>
> <th background="../smiths.jpg"
> scope="col"> </th>
> <th scope="col"> </th>
> </tr>
> </table> <p> </p>
>
>
> Ta!
>

MS Word Background image not converting

I have Microsoft Word 2007 & Acrobat Pro 9. I created a document in Word, and that doc has a background image. However, when I try to convert it to a PDF, one of two things happens: 1) the PDF is created with no background image, or 2) the background image is reduced in size & tiled in repeating rows in the background. Neither of these is acceptable! I've tried the following:
From in Word -->Print-->Acrobat PDF
From Acrobat -->Create PDF-->From File
From Word -->Save As-->PDF
From Acrobat-->set background image
This is quite frustrating, since I don't want to re-do everything in Photoshop just to render the PDF properly. I set the image as a background in Word because I want it to cover the whole 8.5"x11" space without any margins. The image is a 95 dpi JPG sized at 8.5"x11"

You may need to check Acrobat and be sure you have Display Large Images selected. If that is not the issue, it may be a setting in your print options of WORD. Programs like WORD and PPT often have the default set to not print background images because they use so much toner in a regular printer. Since you are using a digital printer that option is not needed.

Problems with the background image in IE

Hi I've been optimizing some pages for the different browsers in Dreamweaver CS4. They all work fine in Safari, Firefox and Opera, Internet Explorer is, however not showing the background image I have selected. I can't for the life of me see what's going wrong! Any help wopuld be appreciated. here is the code on my index page which I built from a template. I don't know if it's the editable areas that are going wrong!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>test site</title>

<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

<meta name="Description" content="facedivorce.com.com is an online resource tool to help guide you through the various stages of divorce. Simply click on before, during or after divorce to find everything you could ever need to do with divorce.
" />
</head><meta name="keywords" content="test
" />

<body class="oneColFixCtrHdr">
<div id="container">
<div class="oneColFixCtrHdr" id="header">
    <table width="740" border="0" align="center">
      <tr>
        <td border="0" height="38" ></td>
        <td align="right" valign="bottom">
          <p class="TextButtons"><a href="index.html" class="TextButtons">Home</a>   <a href="featuredcompany.html" class="TextButtons">Featured Company</a>   <a href="youngpeople.html" class="TextButtons">Young People</a>    <a href="andmore.html" class="TextButtons">And More</a>    <a href="blog/index.html" class="TextButtons">Blog</a></p>
        </td>
      </tr>
      <tr>
        <th height="48" align="left" valign="bottom">
<h1><a href="index.html" title="test"><img src="images/test_logo.png" alt="test" width="245" height="46" border="0" align="left" /></a></h1>
</th>
        <td align="right" valign="bottom"><a href="#"><img src="images/facebook-logo.png" alt="FaceBook Button" width="48" height="48" border="0" align="bottom" /></a> <a href="#"><img src="images/twitter_square.png" alt="Twitter Button" width="48" height="48" border="0" align="bottom" /></a><a href="#"><img src="images/blogbutton.png" alt="Blog Button" width="49" height="47" border="0" align="bottom" /></a>    </td>
      </tr>
    </table>
    

Hi
The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
Change - background-image:url(file:///Macintosh HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
To - background-image:url(images/test_back.png);
But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
PZ
www.pziecina.com

Adjusting background image?

I'm pretty new to the creating of homepages, so this might be
a rather basic problem, but anyhow here's my question: I've created
my own background image in Photoshop and imported it to Dreamweaver
as a background image with the script:
background-image:url(front2.jpg);
background-repeat:no-repeat;
The oroblem I have now however is that the image seem much
too big in size for the created webpage, displaying only a corner
of the original image. How do I adjust this?
Thank you very much in advance for any tip you can give me!
/ Sireli

Hi,
try:
background-position= center top;
"Sireli" <[email protected]> escribió
en el mensaje de noticias
news:fs2hoq$fok$[email protected]..
> I'm pretty new to the creating of homepages, so this
might be a rather
> basic
> problem, but anyhow here's my question: I've created my
own background
> image in
> Photoshop and imported it to Dreamweaver as a background
image with the
> script:
>
> background-image:url(front2.jpg);
> background-repeat:no-repeat;
>
> The oroblem I have now however is that the image seem
much too big in size
> for
> the created webpage, displaying only a corner of the
original image. How
> do I
> adjust this?
>
> Thank you very much in advance for any tip you can give
me!
> / Sireli
>

Background image not cached in browser

Hi,
Using JDeveloper 11g R1.
We have a template, with a PanelGroupLayout component with a background image, like follows:
<af:panelGroupLayout layout="horizontal"
inlineStyle="width:100%; height:2px; background-image:url("images/separacioRalles.jpg"); background-repeat:repeat-x;"
id="pt_pgl5">
In runtime, the request made by the browser includes and _adf.ctrl-state=xxxxxx parameter, which I supose causes the browser not checking the cache.
image/jpeg http://127.0.0.1:7101/ViewController-context-root/faces/images/separacioRalles.jpg?_adf.ctrl-state=1bn1yq032y_79
Is there any way to avoid this _adf.ctrl-state? or another way to set the desired background?
Thanks,
Roger

Hi Frank,
Not working fine at all.
I tried as you said:
<af:panelGroupLayout layout="horizontal"
inlineStyle="width:100%; height:2px; background-repeat:repeat-x; background-image:url("/images/separacioRalles.jpg");"
id="pt_pgl5">
and this is the request received on the server:
127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /images/separacioRalles.jpg HTTP/1.1" 404 1214
Comparing with an af:image component:
<af:image shortDesc="asdf"
source="/images/help.gif" id="pt_i1"/>
the request received on the server:
127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /ViewController-context-root/images/help.gif HTTP/1.1" 304 0
If I put the contextroot in the background-image:url (background-image:url("/ViewController-context-root/images/separacioRalles.jpg"), it works fine.
127.0.0.1 - weblogic [28/ago/2009:10:44:28 +0200] "GET /ViewController-context-root/images/separacioRalles.jpg HTTP/1.1" 304 0
So seems that the background image url is not built in the same way as using af:image component.
Roger B

Background Images not showing up in template-based pages

For some reason, whenever I make a custom .dwt template, with
background images for things such as buttons, on my newly created
page, the background images do not show up. Anyone know why? Thanks
for the help in advance.

Best you start here:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmattsworld.mooretecproductions.co m%2F
55 code errors. Yikes!
Fix those and then see if the problem goes away. If not, post
back. At lease
with clean code we may be able to spot the problem.
Walt
"Irish_Cereal" <[email protected]> wrote in
message
news:fegl0v$jvc$[email protected]..
> Alright guys, I get it. Here's a link to the index:
>
http:///mattsworld.mooretecproductions.com
> Click on Videos on the navigation bar and you'll see
what I'm talking
> about.
> Notice how on the navbar on the index theres the custom
button? On videos
> it
> doesn't show up.
>

Create repeating / tiled background images

Similar Messages

Maybe you are looking for