Computer Talk Discussions here pertain to mods, troubleshooting, and PC/console gaming

HTML help with background pic

Old Jul 15, 2005 | 04:14 AM
  #1  
Corey's Avatar
Thread Starter
Co-Founder/Administrator
iTrader: (1)
 
Joined: May 2002
Posts: 32,242
Likes: 21
From: Auburn, Washington
HTML help with background pic

I made a new webpage for Andy's UT 2004 server.
http://www.pnw4runners.com/gaming/unreal/ut2004.htm

On a screen running a resolution of 1024x768 the fixed background JPG looks great, as the pic is also 1024x768.

However if someone running a higher res on their desktop will see the picture with the design in it twice instead of centered.
http://www.pnw4runners.com/temp2/double_pic.jpg
Is there any code that can be inserted in the HTML to correct this so the background does not double itself?

Thanks,
Reply
Old Jul 15, 2005 | 05:12 AM
  #2  
Churnd's Avatar
Registered User
 
Joined: Jan 2003
Posts: 4,087
Likes: 1
From: Hattiesburg, MS
I think in this line...

body background="ut_background.jpg" bgproperties="fixed"

you would need to change "fixed" to some other value. It's been a long time since I've coded manually, so I can't recall all the values off the top of my head. If you used fixed, it's going to tile it like that throughout the whole document. I would think maybe try "centered" (i doubt that's not how you actually type it), or maybe somebody else knows a better code.

Just a friendly bit of criticism... you might want to see about making the image a watermark so the text shows up on the page better.

Last edited by Churnd; Jul 15, 2005 at 05:16 AM.
Reply
Old Jul 15, 2005 | 05:48 AM
  #3  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
what i would do is set the page's bgcolor to black (#000000). Then DEFINE A WIDTH on the centered table (esp that td with the text) and set the td with the text's background to that unreal tournament logo (using background="ut_background.jpg")

edit that unreal tournament logo to be the exact width of the table and itll look juuuust fine on any res.

if you need help, ill just code it for you... let me know.
Reply
Old Jul 15, 2005 | 05:52 AM
  #4  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
actually, i checked and that image doesnt have a real black bg (#000000)... its actually #0c0c0c
Reply
Old Jul 15, 2005 | 06:05 AM
  #5  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
here man.. i did the coding for ya (view the source):

http://www.kidmoe.com/corey_page.txt
use this as ut_background.jpg: http://www.kidmoe.com/ut_background.jpg

that will actually make the background repeat if theres too much text (which there is) so i broke it down into another table which has no bg.

to make it more readable, id just turn the opacity down on the ut_background image...

edit: heres a darkened ut_background image:

http://www.kidmoe.com/ut_background_dark.jpg

Last edited by lee; Jul 15, 2005 at 06:22 AM.
Reply
Old Jul 15, 2005 | 04:04 PM
  #6  
Corey's Avatar
Thread Starter
Co-Founder/Administrator
iTrader: (1)
 
Joined: May 2002
Posts: 32,242
Likes: 21
From: Auburn, Washington
Chris, the bgproperties="fixed command is only to keep the picture still so when you scoll to read the text.
If that command was not in there, when you scroll to read, the cool UT logo in the middle of the pic would scoll too.

Lee, yes that is not a black background, it was a screen capture when the game fires up, so the black part surrounding the logo is acutaly part of the pic.

I know nothing about tables, never tried before.
I will try copying and pasting your text into a new FP session and see what happens.

I will post back here later when I get a chance.
Lee, thanks a lot for coding that and the pic.
I like the lighter pic better.

PS, here is test one, not complete.
http://www.pnw4runners.com/gaming/un...t2004_test.htm

The background is no longer fixed, as the logo scrolls with the text now.
I will have to look at the source later.
Reply
Old Jul 16, 2005 | 12:29 PM
  #7  
Corey's Avatar
Thread Starter
Co-Founder/Administrator
iTrader: (1)
 
Joined: May 2002
Posts: 32,242
Likes: 21
From: Auburn, Washington
Lee, I looked at the source code again for the page you made, but the graphic is moving along with the text, it is not behaving to the bgpropeties="fixed" command for some reason.
Reply
Old Jul 16, 2005 | 05:29 PM
  #8  
4RUNR's Avatar
Guest
 
Joined: Jun 2003
Posts: 1,615
Likes: 0
From: North Pole
Fixed background images are a bad idea from a usability standpoint as most browsers seem to have difficulty rendering pages with them resulting in jerky scrolling.

But if you are set on them, how far are you willing to go to get it to look right on all resolutions? You can always get the users’ screen resolution, and depending on that serve up different background images using some SSI code.
Reply
Old Jul 16, 2005 | 10:56 PM
  #9  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
Originally Posted by Corey
Lee, I looked at the source code again for the page you made, but the graphic is moving along with the text, it is not behaving to the bgpropeties="fixed" command for some reason.
yup, i took that out. as was just said by 4runr, fixed bg's are bad for visitors... theyre confusing, awkward and hard to read around.

stick to my code, only because it will give you what youre looking for but make it user friendly.

also, tables are quite easy.

you open a < table > (no spaces) and define a width (in pixels) within it (lets say 800).

then you add a table row < tr >. no need to define anything.

then you add a table column < td > and define a width. you should also put in valign="top" so that all the content in the table column will be at the top, rather than centering itself versus any other TD (table columns) you make.

you can make as many tds as you want as long as the total width is equal to the table width (of course).

then you close it all out... < /td > < /tr > < /table >

so in this case the code would be (without spaces!!)

< table width=800 >
< tr >
< td width=400 >
Hi, my name is corey!
< /td >
< td width=400 >
this is column #2
< /td >
< /tr >
< /table >

take the spaces out and place that in your editor....

hope that helped ya.
thats about it...

Last edited by lee; Jul 16, 2005 at 10:58 PM.
Reply
Old Jul 16, 2005 | 11:00 PM
  #10  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
Originally Posted by Corey
Lee, I looked at the source code again for the page you made, but the graphic is moving along with the text, it is not behaving to the bgpropeties="fixed" command for some reason.
i just understood what you meant. its the background image of the cell containing the text... so it wont move... it will just sit behind the text.
Reply
Old Jul 18, 2005 | 09:11 AM
  #11  
BlueTrane's Avatar
Registered User
 
Joined: Jul 2002
Posts: 100
Likes: 0
From: Lewisville, TX
It appears as though you've fixed your problem. However, I recommend checking out CSS (cascading style sheets). Their purpose is to separate format from content. Using CSS with HTML allows MUCH greater control over display, and I find it easier to control on the fly. A good place to start is to check out http://www.w3schools.com/css/default.asp. They provide a good introduction and lots of examples.

In your page, I'd break it into 3 sections: Header, Content, and Footer. So in your HTML code you'd have 3 ID sections. In the Content DIV, you'd specify a background image with no repeat. I don't want to overload you with information you probably won't use or understand, but I'd be happy to help you out if you want to make the jump to using CSS.

Good luck.
Reply
Old Jul 18, 2005 | 10:48 AM
  #12  
BlueTrane's Avatar
Registered User
 
Joined: Jul 2002
Posts: 100
Likes: 0
From: Lewisville, TX
Corey,
Just for fun, I redid your code using CSS as an example. I've attached it.
Regards,
Nick
Attached Files
File Type: zip
index.zip (2.4 KB, 34 views)
Reply
Old Jul 18, 2005 | 07:36 PM
  #13  
lee's Avatar
lee
Contributing Member
 
Joined: Dec 2003
Posts: 6,729
Likes: 0
From: boston, ma
yea, mine is a solution, but if you want to get serious about making designs that truely function, you should take some time to learn html and css.
Reply
Related Topics
Thread
Thread Starter
Forum
Replies
Last Post
GreatLakesGuy
The Classifieds GraveYard
8
Sep 4, 2015 09:27 AM
terminator
Misc Stuff (Vehicle Related)
3
Jul 27, 2015 07:13 PM
94whiterunner
Items Wanted
0
Jul 12, 2015 07:15 PM
crashburnoveride
86-95 Trucks & 4Runners
1
Jul 10, 2015 06:39 AM


Thread Tools
Search this Thread

All times are GMT -8. The time now is 12:28 AM.