'Wide Screen Viewing' backgrounds appear with tiling to left and right

ENIGMACODE · #1 07-06-2007, 10:05 PM

Hello

I've been using an older Editor called 'Page Wiz'

I can tweak the HTML, but I don't know what code or where to put it in order to limit the Page Backgrounds from tiling to the left and right?

In the backgrounds of these pages is usually a photograph which looks fine on a normal screen, but it tiles to either side on a Wide Screen.

Here's the page:
ww2survivorstories-com

Thanx for your help
Mike

**ray326** · #2 07-06-2007, 11:49 PM

In the stylesheet try:
body { background: url(theimage.jpg) no-repeat center center; }

BUT that editor has outlived its usefulness. Trade it immediately for HTML-kit and let Tidy fix each of your pages.

ENIGMACODE · #3 07-07-2007, 01:55 PM

http://www.ww2survivorstories.com/test-1.htm

ENIGMACODE · #4 07-07-2007, 01:58 PM

Thank you ray326

Please take another looksee - Obviously I screwed something up:
ww2survivorstoriesdotcom/test-1dothtm

**WebJoel** · #5 07-07-2007, 02:05 PM

Quote:

Originally Posted by ENIGMACODE

Thank you ray326

Please take another looksee - Obviously I screwed something up:
ww2survivorstoriesdotcom/test-1dothtm

Quote:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
html { background: gray url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")center no-repeat; }
<DIV ><table width="600" align="center">
<TBODY><tr><td>....

Should instead be:

Quote:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>

<style>
html { background: gray url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")center no-repeat; }
</style>

</HEAD>
<BODY>

<DIV ><table width="600" align="center">
<TBODY><tr><td>....

This is "style" and that goes before the closing "</head>"

ENIGMACODE · #6 07-07-2007, 02:35 PM

http://www.ww2survivorstories.com/test-1.htm

bolty2uk · #7 07-07-2007, 03:28 PM

i cant see a problem in different resolutions?

Use this code.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>link</title>
<style>
html { background: gray url("http://www.ww2survivorstories.com/home-backgrd-2.JPG")center no-repeat; }
</style>
</head>
<body>
<DIV ><table width="600" align="center">

<TBODY><tr><td>
      <P align="center">

<A href="http://www.ww2survivorstories.com/"><FONT size="3" face="Impact">Home</FONT></A>&nbsp;</FONT> 
<A href="story.htm"><FONT face="Impact" size="3">The Story</FONT></A>&nbsp; <A href="veterans.htm"><FONT face="Impact" size="3">The 
Veterans</FONT></A>&nbsp; <A href="photos.htm"><FONT face="Impact" size="3">Photographs</FONT></A>&nbsp; <A href="preview.htm"><FONT face="Impact" size="3">Preview</FONT></A>&nbsp; <A href="research.htm"><FONT face="Impact" size="3">Research</FONT></A>&nbsp; <A href="links.htm"><FONT face="Impact" size="3">Links</FONT></A>&nbsp;&nbsp;&nbsp; </FONT></P>

      <P></P>
      <P></P>
<P align="center"><FONT color="#ffffff" face="Arial">&nbsp;&nbsp; </FONT></P>
      <P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6"> </FONT></FONT>
      <P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6"> </FONT></FONT>
      <P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6">Survivors' Stories</FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial">
<P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="6">&nbsp;&nbsp;&nbsp;&nbsp;<FONT size="5">North Africa 
      1942-43</FONT> </FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial">&nbsp;       
      </FONT>&nbsp;</P></FONT>

<P align="center"><FONT color="#ffffff" face="Arial">&nbsp;&nbsp; </FONT></P>
      <P align="center"><FONT face="Arial" color="#ffffff"><FONT face="Impact" color="#000000" size="4">&nbsp; An independent non-profit film</FONT>&nbsp;&nbsp;</FONT><FONT color="#ffffff" face="Arial"></FONT></P>
</td></tr></TBODY></table>
<DIV></DIV>
<P>&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center">&nbsp;</P>
<P align="center"><FONT face="Courier New" size="2"><STRONG>For information on how 
to obtain a copy of the DVD, contact: </STRONG></FONT></P>

<P align="center"><FONT face="Courier New" color="#0000ff" size="2"><STRONG><A href="mailto:survivorstories@comcast.net">survivorstories@comcast.net</A></STRONG></FONT></P>
<P align="center"><FONT size="2"><FONT face="Courier New">&copy;&nbsp; <FONT color="#000000">Copyright 
2007</FONT></FONT></FONT></P></A></TD></TR></TABLE></DIV>
</body>
</html>

**ray326** · #8 07-07-2007, 08:52 PM

My only comment is the style should probably be on the body rather than the html.

ENIGMACODE · #9 07-07-2007, 11:34 PM

http://www.ww2survivorstories.com/Test-5.htm

I copied the code exactly - but now I've lost the photo altogether

bolty2uk · #10 07-08-2007, 01:12 AM

When i look at your link i see a page with a background with a big ship in the middle.

Do you see that? If not, how are you viewing the page.??

ENIGMACODE · #11 07-08-2007, 08:02 AM

Hi bolty how ya doin?

If you stay just exactly on the page:
http://www.ww2survivorstories.com/Test-5.htm

without clicking on any of the links, the background photo doesn't appear
(try refreshing your browser)

This problem that I'm having ONLY refers to viewing on a wide screen computer - NOT a coventional sized screen

I've tried EVERYTHING - It seems I just can't find the code that will FIT that background photo DIRECTLY in the middle of a stretched WIDE screen, while adding a gray colored border to either side left and right, to act as a limit to the each side of the background photo.

I've tried BOTH Editors:
My older Page Wiz Editor
AND
The link to the newer technology free 'HTML KIT'

Both Editors cannot seem to solve this problem

My alternatives:
Simply stretch/distort the ENTIRE length of the background photos affected, so they won't TILE
Then when folks will view them on a wide screen, they'll just see more of the STRETCHED background photo ....

Thanx

ENIGMACODE · #12 07-08-2007, 01:23 PM

Hello and thank you everyone who tried to help me
(I really appreciated it)

I've settled for a reasonable compromise and just stretched a few
photos from specific photos that I felt were important NOT to Tile
when viewing.

The other backgrounds actually look better 'Tiled' because there is
important information that can be read adequately without
missing anything when viewed on a normal sized view screen.

Take a another look in both wide screen and normal view:
http://ww2survivorstories.com/
(I'm satisfied)

Thanx so much
Mike

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)