repeating image

[redice]

Iv made a website maraconservancy.com

now when the user viewing the site has a resolution higher than 1024x768 the image on the right keeps repeating.
And when the user is in a lower res the image doesnt show

Why is this?

How can this be resolved?

Redice

[jscheuer1]

Ok, you have a table (t1). The first row of that table has 4 cells. The first three cells each contain a nested table of fixed width:

Contained Tables:
c1) width=159
c2) width=167
c3) width=454

total= 780

That leaves the rest (approx: 244, not counting chrome, margins, borders, etc., on a 1024 wide display) for the fourth cell (c4, in the above) which has no fixed width and is set to width=100% so it will occupy whatever space is left over. This fourth cell has the jaguar as a background image with this style (set in the stylesheet by the cell's class name):


.bgtop {
background-repeat: repeat-x;
background-position: top;
}

So, let's put this all together, it means:

In the space that is left over in the window after 780px of width is used by the first three cells, the jaguar image will repeat along the x axis (width) as many times as there is room for it.

This is exactly what is happening. The fact that there are two other rows to this table (t1), the last of which has its first cell with a colspan of 3 (making it count as the first three cells of the first row) that contains a table with its width set to 780 and the other cell (which corresponds to the first row's fourth cell) set to width=100%, only reinforces the layout.

That all answers 'Why?'

The resolution:

There isn't enough room for your content + the jaguar image on a 800x600 display. The jaguar can be made not to repeat at higher resolutions by setting the style:


.bgtop {
background-repeat: no-repeat;
background-position: top left;
}

To get things to 'work' at 800x600 resolution would involve a redesign of the page. How this is done would really be up to you but you will need to set all your widths so that they add up to less than 800 (including 260px for the jaguar), or use relative widths (percentage) for all the elements involved. Images will not cooperate with this second strategy though, so a different layout altogether would be required.

[redice]

WOW

Thanks a million john. Will correct this ASAP

redice

[redice]

hi....

so i finally got around to correcting the image repeatation issue I had.....
It works thanks to Johns wonderful help.

sad issue is that now there is a gap between the header image and the side image.

This gap keeps increasing as the resolution increases.
Any advise

Redice

[jscheuer1]

.bgtop {
background-repeat: no-repeat;
background-position: top left;

[redice]

:-)

Any one ever tell you your a great man :-)
Let me have the hounours to let you know "YOU ARE A GREAT MAN"

Dont know how I over looked that.... hmmmmmm..

Redice