Home Site Build It!  Multimedia Download Center Home
 Free Multimedia File Downloads Index
Multimedia Resources Home
Free Birthday Songs / Music
Free Background Image Tiles
Free Sound Effects
Free TV Theme Songs
Free Computer Wallpapers
Free Icons Collections
Windows Movie Maker
Free Computer Clipart Images
Free Website Templates
Free Fonts Downloads
Mega-Paks File Archives
Free Website Page Graphics
Articles, Tutorials & Trivia
Free Cool Tools Online
Free Midi Karaoke Songs Free MIDI Karaoke Songs

 Nifter Media Group
Nifter Media on YouTube
Casey Anthony Case Videos
Link to Nifter.com

  Free Online Masters Courses
WAHM - Work at Home Mom
Webmaster Business Course
NetWriting Course
Service Business / Sellers
Local Business Course




 Highly rated web hosting service as low as $5.95 per month!







Artisteer - Web Design Generator







 Click here to start building your own software programs today!




Page 1 Free Tiled Web Page Background Images, Picture Tiles
Web Page Tiles Download free web page tile backgrounds. All background pictures in this section can be tiled to create a seamless background design on your web pages. Most of the tiling images are textured or 3D texture designs.

Home > Free Multimedia Resources > Web Page Backgrounds That Can be Tiled



Create Beautiful Web Page Backgrounds with Tiled Images
Tiling images to create beautiful, artistic designs on web pages has always been a popular method of dressing up a website. The pictures in this section have all been created so that they can be used in the web page background tiles fashion. The tiled pattern is created by repeating an image over and over, both horizontally and vertically until it fills the entire web page. The tiling action - repeating the image - is performed automatically by your web browser when it is 'told' to use a specific picture as a background image. If you want to gain more control over the tiled design (tiling only horizontally or tiling only vertically for example) you need to use Cascading Style Sheets, or CSS. With standard HTML coding / scripting, your only option is to displayed the tile image in both directions.

If you're not sure how to tile an image on a web page or want to learn methods of creating tiled background patterns, read the tutorial How to Tile an Image on a Web Page found lower down on this page.

How to View and Download the Free Image Tiles Web Page Backgrounds
The sample images (below) may not all be displayed in their normal aspect ratio as each sample is displayed with the same dimension to provide a clean browsing experience. Click on any tile's sample picture to view it at its actual size and aspect ratio. To download one of the web page background image tiles, right-click on the sample picture and choose 'Save Image As' or 'Save Picture As' depending on the web browser you are using.


Free Tiled Web Page Background Images - Picture Tile Backgrounds

Currently viewing:  Page 1


1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   Next >>

 Click web page tile background picture to view actual size

Pictures That Can Be Tiled 001
 Click web page tile background picture to view actual size

Seamless Tiled Images 002
 Click web page tile background picture to view actual size

Background Tiles 003
 Click web page tile background picture to view actual size

Free Backgrounds 004
 Click web page tile background picture to view actual size

Download Background Pictures 005
 Click web page tile background picture to view actual size

Download Background Pictures 006
 Click web page tile background picture to view actual size

Free Tiling Backgrounds 007
 Click web page tile background picture to view actual size

Tiled Pictures 008
 Click web page tile background picture to view actual size

Free Seamless Background 009
 Click web page tile background picture to view actual size

Seamless Page Background 010
 Click web page tile background picture to view actual size

Page Background 011
 Click web page tile background picture to view actual size

Web Backgrounds 012
 Click web page tile background picture to view actual size

Free Background Tiles 013
 Click web page tile background picture to view actual size

Tiled Pictures 014
 Click web page tile background picture to view actual size

Free Backgrounds 015



Currently Viewing:  Page 1



1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   Next >>


 Download a complete archive of background images that can be tiled Want All of the Background Images in this Section?
With just one download you can receive the complete archive of Web Page Background Images That Can Be Tiled. The complete collection of 564 images in one easily downloadable zip file! Other archives also available.
Visit the Mega-Paks Archives page to learn how to get yours now.

 Make your own software and sell it online Make Your Own Software and Sell Online - Automated Software Builder
Innovative new product lets you build your own software programs in minutes! With full rights to the software you create you can sell it online and all the profits are yours.
You can get your copy of this exciting new product here.




 Background images used for tiled designs on web pages

 




 Click here tto start building your own software programs today!



































Build a Professional Looking Website with Homestead.com.



































LinkShare_120x240v1

































































 Build a Professional Looking Website in Minutes

The iFacts Collection - Interesting Page Related Content
Nifter.com iFacts
iFact #61 -


 Build a Professional Looking Website in Minutes



































LinkShare_120x240v1



































Build a Professional Looking Website with Homestead.com.







































































 Click here tto start building your own software programs today!
How to Tile an Image to Create a Seamless Web Page Background
This tutorial outlines methods you can use to tile an image on a web page, thereby create a seamless background design. We'll also explain how you can prevent an image from tiling when you don't want it to and how to transform any image into one that will look decent when tiled.

Tutorial Subjects Index

How to transform an image into picture that looks good when tiled
Using the Body tag to tile an image
Tiling images with the table data (TD) tag
Using Cascading Style Sheets (CSS) to control image tiling


How to Transform Any Image Into One That Looks Good When Tiled
Not all images look good when tiled as a background. Pictures such as those in our Web Page Backgrounds That Can Be Tiled section (above) are already set up for tiling purposes, and so are perfect for the job. If you want to use an image that is not specifically designed to be used as a tiled background, then there is a trick you can do to make it look better when tiled.

Perhaps we should first explain what makes an image good for tiled backgrounds. In a nutshell, the image should match up on all four sides to itself. That may sound a little strange, so let's take a look at an image to help explain.

If you look closely at this picture you will see that the pattern on the left side of the image matches up with the pattern on the right side, and the same with the top and bottom. Therefore, when this image is tiled the pattern will join, so to speak, and create a seamless design.



Here's what the above image looks like when tiled. You can see that an even pattern is created because of the image design:










 


Now we'll look at the same image again, only this time it has been edited (cropped smaller) so that the sides, top and bottom no longer match up. This is the image that was used:



And here is the image tiled:










 


Obviously the design that was created by tiling the second image is not one most people would want on their website. The point is, not all images look good tiled, but there is a method for fixing that problem.

How To Make Any Image Look Good When Tiled
Okay, so you have a picture that you really want to use as a web page background, but when you tile it, it looks horrible. Here's the solution:

With this method we're going to use our example image that looked horrible when tiled and turn it into one that looks decent. It's not hard to do but requires some editing with image editing software. We'll have to assume you have some basic skills with image editing software to accomplish this. Follow these steps to proceed:

  1. Open the picture in your favorite image editing software.
  2. Copy the picture to the clipboard. This will normall be Edit > Copy in most programs.
  3. The next step is to enlarge the canvas (not the picture, the canvas) so that the new dimensions equal twice the width and twice the height of the picture's original size. For example, if the image you are working with is 50x50, enlarge the canvas to 100x100. When enlarging the canvas, make sure the original picture is in the top-left corner. Your image editing software should allow you to choose where the original image is placed on the new canvas size. Again, it should be in the top-left corner. Your picture should now look like something this:

  4. Select Edit > Paste in your graphics software to paste the original image that you copied to the clipboard into the new canvas. Flip the pasted portion horizontally then move it into the upper-right corner. Your picture will now look something like this:

  5. We now repeat the same process for the bottom-left corner and the bottom-right corner, but with some differences. For the bottom-left corner, the pasted portion is to be flipped vertically instead of horizontally. For the bottom-right corner, the pasted portion must be lipped both horizontally and vertically. These steps will give you images that looks something like these do, respectively:

       

    You're done! The finished image will now match up on all sides to itself and can be tiled as a web page background.

Now, when tiled, the new image produces a pattern like below. The background is now seamless with each picture matching up to the next, which is at least better than the unsightly mess we saw earlier.









 

To help you remember how to do this, here is a picture that you can download; it is marked with the proper 'flips' to create an image that can be tiled. Just remember to copy the original image before you start working with it, then resize the canvas so that it is twice the width and height of the original. Here's the picture:



It's time to outline some popular methods used to create seamless, tile web page backgrounds.

Popular Code Used To Tile a Web Page Background Image
There are three common methods used to tile images on web pages: code applied to the Body tag, code applied to the table data (TD) tag and with the use of style sheets (CSS). We'll look at all three here and outline the advantages and disadvantages of each.


Using the Body Tag to Tile an Image
This is a very simple method that is easy to implement. A 'normal' body tag used in simplified HTML documents will usually make reference to the background of the web page. For example, the following body tag displays a web page with a white background. We've included the text and link properties so that the tag appears more complete.)

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF">

To change the background property to reference a picture, the tag would be written like this:

<body background="ImageName.jpg" text="#000000" link="#0000FF">

When an image is referenced in the body tag as above, the picture will be tiled over the entire background of the web page.

Advantages
It's a simple way for those not familiar with CSS (Cascading Style Sheets) to create a tiled web page background. Different foreground colors and/or tiled patterns can still be used in table cells to add a more pleasing look to the website. Bottom line, it can be useful in certain situations.

Disadvantages
You have no control over the display. The entire page will be covered with the tiled image excepting those areas where table cells over-ride it. This also means that you are forced to over-ride the design if you don't want it shown on some areas of the web page which can turn into quite a hassle. Also, the image will be tiled both horizontally and vertically and you cannot change that fact.


Tiling Images With the Table Data Tag
The most basic table data tag looks like this:

<td>

The most basic table data tag that specifies a color for the background looks like this:

<td bgcolor="#FFFFFF">

To create a tiled background with an image in a specific table cell we use the same code as we would in the body tag:

<td background="ImageName.jpg">

This will cause 'ImageName.jpg' to be tiled horizontally and vertically in the specific table cell the 'background=' code was added to. It should be noted here that if you do not specify any background for a table data (td) cell, the main background of the web page will be shown.

Advantages
Again, it's easy to do, plus, using table cells (tables) allows you more control over the look of your web page. You could, for example, tile one image pattern in the body tag for a main background, then use tables to display overtop the main background with other colors and/or tiled designs. This needs to be done carefully, however, or you may end up with a web page that appears 'unruly' and cluttered. Tiled backgrounds in general need to be chosen carefully as your visitors may not appreciate having some glaring, wild design obscuring the text of your web pages.

Disadvantages
As with the body tag, the image will be tiled both horizontally and vertically whether you like it or not.


Using Cascading Style Sheets (CSS) to Control Image Tiling
The use of Style Sheets will give you full control over any image tiling you wish to do on your web pages. Pictures can be tiled horizontally only, vertically only, both directions, or an image can be displayed with no tiling at all.

If you are unfamiliar with CSS you can find a good Style Sheets Tutorial here. For this article, we'll show you the code used to tile images any way you would like.

This is an example of a style sheet class that could be used to set properties for a web page:

.MyCss {
background: #FFFFFF;
color: #000000;
font-family: arial;
font-size: 12px;
}

We've included the 'font' and other properties just to make it look more complete. In the above example, any part of a web page (or the whole thing) that specifies 'MyCss' will be displayed with the properties shown in the example. The background color would be white (#FFFFFF), the text black (#000000 - specified by 'color' in the element) and so on.

To add a background image that is tiled, we add the 'background-image' element like so:

.MyCss {
background: #FFFFFF;
background-image: url("ImageName.jpg");
color: #000000;
font-family: arial;
font-size: 12px;
}

As shown above, the background image would be tiled horizontally and vertically because no other instructions have been included in 'MyCss.' (Tiling horizontally and vertically is the default.) We can control how the image is tiled, however, by adding more instructions. To have the image tile horizontally only we insert the 'repeat-x' property like this:

.MyCss {
background: #FFFFFF;
background-image: url("ImageName.jpg");
background-repeat: repeat-x;
color: #000000;
font-family: arial;
font-size: 12px;
}

To have the image tile vertically only, we use the 'repeat-y' property instead:

.MyCss {
background: #FFFFFF;
background-image: url("ImageName.jpg");
background-repeat: repeat-y;
color: #000000;
font-family: arial;
font-size: 12px;
}

You can also cause the image to be displayed statically, without repeating by changing the code to this:

.MyCss {
background: #FFFFFF;
background-image: url("ImageName.jpg");
background-repeat: no-repeat;
color: #000000;
font-family: arial;
font-size: 12px;
}

Advantages
There are many; if you're not using Style Sheets with your website you are missing out on a lot. CSS is much easier to learn than you might imagine, so if you're only slightly familiar with it, or not familiar at all, take the time to read a good Style Sheets Tutorial. The use of Style Sheets gives you full control over how your image is tiled, and you can't beat that. With full control, there is little else to say. CSS is the way to go.

Disadvantages
None

We just want to add that in the examples above, the image to be tiled was always referenced directly, for example, background="ImageName.jpg"  That works fine if your images are in the same folder as your web pages, but most websites are not set up like that. To reference an image from the folder it resides in, you simply add the path to the image starting from the location the web page is in. For example, if the image is in a folder called 'images' it would be referenced like this: background="images/ImageName.jpg"



Credit Card Services for Your Website - Low Rates and Free Features






Partners    Privacy Policy    About    Top of Page    Search    Contact    Home

Download Center    Nifter's Nuts



 Link to or exchange links with Nifter.com



 Top Rated Web Hosting - Unlimited Websites, Bandwith, Email, Subdomains...



 This Web Site Rated and Approved by SafeSurf



   Nifter Media Group  Home Copyright © 2009 - Nifter.com - All Rights Reserved