Background

Gatorajc · Oct 28, 2002

How do I make backgrounds for web pages? I have this image that is really great and I want to use it. But when I try to use it, it displays 3 times. Is there a certain size or something. I know this may seem like a stupid question. Im not a graphics person at all. AJ
I would lose my head if it wasn't attached. [roll1]

blueark · Oct 28, 2002

Are you trying to display your image only once? This is a little tricky, because when you specify a background image, most web browsers keep repeating it to fill the screen. The trick is to make the canvas area much bigger than most monitors can display in one go. So, open your image in Photoshop, go to Image > Canvas Size, and add large areas of empty space to the left and to the bottom of your image. Aim for at least 1600x1200 pixels and make sure that there is lots of flat color so it won't take forever to download.

Pixelchik · Oct 28, 2002

You can put background inside a table and table cells or just in the background of your page. But depending on the size of your image it will most likely "tile" as you've described it did on your web page. To avoid this you need to make the size of your image bigger than the size of your display so that it won't be able to tile. For example: if your table size or your target display size is 800 x 600 pixels, then you would need to make your image larger than that. Same goes for an image inside a table, whatever the table size is, your image should be larger so it won't tile. But be advised, that if you have users with a larger display (ie 1024 x 768 or bigger) it will tile on there display if you don't fix the size of your display ( as in a fixed table). Does this make sense?

jimoblak · Oct 28, 2002

Somewhere near the top of the HTML you should find...

</head>
<body background="images/bg.gif">

You say you are not a graphics person so I am guessing that you tried to place a couple images on the page in an editor to create the BG (excuse me if I assume incorrectly).

If you can name the web page editor you are using, we might offer the place to enter the background image. Otherwise, go to the HTML source view and use the tag shown above.

gollyg · Oct 28, 2002

There is another approach, but it requires CSS and a browser that supports it. It is to insert the background images by using a style attribute, eg

Code:

<table style=&quot;background-image:url(background.gif); background-position:center; background-repeat:no-repeat&quot;>

or

Code:

<table class=&quot;bgImage&quot;>

.....

and in your style sheet

Code:

.bgImage {background-image:url(background.gif); background-position:center; background-repeat:no-repeat}

The first bit (background image

defines the location of the image file, the second bit (background-position) defines the horizontal and vertical alignment, and the third bit (background-repeat

tells the browser not to repeat the image in either direction (there are values that allow you to repeat either horizontally or vertically).

If you go down this path cross-browser checking is essential (and it won't work in NN4!).

Gatorajc · Oct 29, 2002

No I know how to insert backgrounds. I just have an image that is to small, I guess and repeats three times. I want it show just once. I never made my own background. I will try the suggestion made by Pixelchik and see how it goes. I just thought there was a certain size that I could make it and it but I guess it would depend on what the display is set to. AJ
I would lose my head if it wasn't attached. [roll1]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Background

Gatorajc

MIS

blueark

Technical User

Pixelchik

Technical User

jimoblak

Instructor

gollyg

Technical User

Gatorajc

MIS

Similar threads

Part and Inventory Search

Sponsor