Frontpage.

  laneyxx 01:08 10 May 04
Locked

I've made a site for a friend of mine and used a .gif as a background for all the pages. On some computers, not mine though, this image seems to be "tiled". You can see the top of the image repeated again at the bottom of the page. Is there a way of stopping this? I use frontpage 2002. Thanks.

  laneyxx 10:50 10 May 04

Thanks. I've made the image a size to look ok on my computers, (100 pixels) but on others, maybe Mac?, people have said about seeing this repeated image.
I know what you're saying about the background image but I do need it on this site.

click here

  Taran 11:48 10 May 04

You can use the 'no-repeat' CSS instruction to ensure that your image is displayed only once.

Is the image in a table or is it somewhere ielse on your page ?

I've not looked at the source code of the page yet, and I'm a bit pushed for time at present, but the solution will depend on whether your image is on its own or in a table somewhere.

There's a useful guide to background images and CSS at he excellent W3 Schools site click here

I'll check in later and if you haven't confirmed where the image is on the page I'll read your source code myself.

  laneyxx 12:22 10 May 04

The image is in a seperate folder and used for all the pages on the site.
I don't think it's a table, I'm new to this, I just used the format/ background option and ticked the babckground image box on all the pages.

  Taran 12:51 10 May 04

Right, can you confirm whether the site URL you gave the link for above is the site you are working on now ?

In brief, you can go to the HTML view of your page, and insert a style block that will control the background image repeat, which is a default setting. Unless you manually turn off image repeating it is set by default to repeat over the page.

An example of an empty HTML page with background repeating turned off would be this:

<html>

<head>

<title></title>

<style>

body {

background-image: images/FILENAME.GIF;

background-repeat: no-repeat;

}

</style>

</head>

<body background="images/FILENAME.GIF">

</body>

</html>

The <style> block is a series of formatting instructions. In this case it tells the page that if the background image is called images/FILENAME.GIF then it is not to be repeated over the page.

So when your <body> tag contains a reference to that file, the <style> instructions are acted upon. If the <body> tag uses a different filename, you need to change the filename in the <style> block or it will be repeated by default.

I've used the images/FILENAME.GIF location of your image, since it is good practice to keep all of your images in the images folder FrontPage creates for you in the web root folder. If you background image is not in the images folder, either copy it there and use the code example above, or if it is in your web root folder you can simply call it FILENAME.GIF in the <style> and <body> tags and miss out the folder name of images/

If this is confusing at all then post again and I'll try and walk you through it, but you should get the idea from the above sample code.

The only real problem that I see is that the background image will, by default, position itself at the top left of the page, so this may need some additional adjustments.

A simpler way by far if the image is only small is to include it into a table cell which effectively allows you to control its position without using CSS <style> blocks and it will also make certain that the image is not repeated over the page.

  laneyxx 19:04 10 May 04

Thanks again for your help.
It is the site I'm working on yes. At the moment in the HTML it say's

<style fprolloverstyle>A:hover {color: red; font-weight: bold}
</style>
</head>

<body background="WEBSITE%20LAYERS.gif" style="position: absolute">

Can I just add "background-repeat: no-repeat;" somewhere in there?

  Taran 19:45 10 May 04

No, that won't work since a position absolute has been applied to the page element. The no-repeat will either have no effect or will conflict with the current code.

I've just opened up your page to check out what is happening and I can see where things are going wrong.

Unfortunately, I can't suggest a quick fix that doesn't involve a lot of tweaking or even starting afresh.

Using a single image like this is fraught with problems, and you've compounded it by using layers to position all of your page elements.

You could have set out a table filled with the colour you want for the main body of the page, and use slices of your current image to fill the top and left table cells with the "Crimson Harvest" and "home" sections of the image.

I can't think of a quick and simlpe fix for you.

You could incorporate the "background-repeat: no-repeat;" with a bit of modification which would prevent things from repeating all over the place, but it won't remove the other problems I can see on the page.

I'll have a think, but this is all down to using one large image and I'm a bit stumped at the moment how to guide you through a simple fix, mainly because I can't think of one off hand.

  Forum Editor 19:54 10 May 04

that you insert the image into a table cell, and then create a second cell beneath it. Sample the background colour from the first cell, and then set that colour as the background for the second cell. Provided you configure the table borders correctly the colour will merge with the top cell and you'll have what you're aiming for.


Frankly that's a blunt instrument - I think you would be far better off creating a graphic for your top shared border, and then formatting a table with the dominant red colour background.

  laneyxx 21:01 10 May 04

I've added that "repeat" now to the home page, but I can't tell if it's working because my resolution only goes up to 1024 x 768.

the line now reads

<body background="WEBSITE%20LAYERS.gif" style="position: absolute background-repeat: no-repeat;">


Is this right?

  tomleady 10:04 11 May 04

i get the top part of it again on mine too.

you still have this line:
<body background="WEBSITE%20LAYERS.gif" style="position: absolute background-repeat: no-repeat;">

which Taran said wouldnt work.

so put in his suggested line:

<style>

body {

background-image: images/FILENAME.GIF;

background-repeat: no-repeat;

}

</style>

  laneyxx 10:18 11 May 04

Ok, I've done that I think, on the home page.
I've added the line

<style>body {background-image:url('WEBSITE%20LAYERS.gif');background-repeat: no-repeat}
</style>

And taken out the line:

<body background="WEBSITE%20LAYERS.gif" style="position: absolute background-repeat: no-repeat;">

This thread is now locked and can not be replied to.

Amazon Fire HD 8 review: A brilliant combination of function and value – with one massive caveat

1995-2015: How technology has changed the world in 20 years

How to create an introvert-friendly workplace

Apple Watch 2 review | Apple Watch Series 2 review: New Apple Watch is faster, brighter, water-resit…