Help With HTML Background iSSUES

**NYXX** · Oct 6, 2007 20:13

I'm designing a webpage from a template that I bought.

I'm trying to edit this line of text.

<td width="50%" valign="top" style="background:url(images/px_left.jpg) top repeat-x"></td>

The image is 246 pixels wide by 920 height. However I do not want it repeating on my page, I want it to only display once. I've looked into my css file theirs no information on this particular line of text surrounding the images for the left and right.

I've tried getting rid of the repeat. It causes my page to shift. The actual file of the image is 1px by 920 its the 1 px same as the right that is getting repeated to cause the larger black right side.

I also wanted to know how can I make my webpage support widescreen resolutions

such as

1680x1050
1360x1024
1360x768
1280x960
1280x768

Sample

http://www.nyxxunderground.com/SEPTA...tml/index.html

I want to try and create something similiar to the home page of www.wwe.com I want try and have those side images on my page

**ParkinT** · Oct 6, 2007 20:20

Depending upon the browser, because the TD is set to 50% the image will automatically repeat if it is not large enough to fill the space provided.
What happens if the TD is set to exactly 920 px?

**NYXX** · Oct 6, 2007 20:26

Would I need to remove the repeat-x if I change the % to pixels?

**RetroNetro** · Oct 6, 2007 20:44

I am no expert when it comes to tables and applying backgrounds to them, but what happens if you change it to:

Code CSS:

background:url(images/px_left.jpg) top left no-repeat

?

**NYXX** · Oct 6, 2007 20:53

http://www.nyxxunderground.com/SEPTA...tml/index.html

But I'm testing on a 1280x1024

My partner has viewed the page at 1680x1050 and states that the actual images on the left and right become centered in their space whith about 2 inches of grey on left and right.

**Centauri** · Oct 7, 2007 01:04

As that "template" uses an incomplete doctype and tables for layout, you should not have paid ANY money for it ......

**NYXX** · Oct 7, 2007 08:08

What you mean incomplete?

**Centauri** · Oct 7, 2007 09:31

A complete doctype includes the uri - html 4.01 transitional complete doctype should be

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The side images will behave as your partner has described due to their non-tilable fixed width, and application to separate html elements. If you can rework the graphic to make it tilable, and apply it the the body background, then you will get the result you want. The background on the other site you linked to is actually one large background graphic on the body.

**NYXX** · Oct 7, 2007 09:36

If I were to include that top line into my html code would it solve the problem

Currently on Wide Screen it looks like this.

http://www.nyxxunderground.com/SEPTA...7;20screen.jpg

**Centauri** · Oct 7, 2007 10:09

Originally Posted by NYXX

If I were to include that top line into my html code would it solve the problem

No, but a full doctype should always be used to ensure the best cross-browser conformity. If you want the background graphics to behave like background graphics, then you will need to make them tilable and apply it to the body.

**NYXX** · Oct 7, 2007 10:12

How would i do that?

**NYXX** · Oct 7, 2007 22:08

?

**NYXX** · Oct 8, 2007 20:27

Still can't figure this one out,

I tried Exact Pixels, alignments, can't seem to fit to monitor size or browser size.

On the widescreen of 1680x1050 it looks like this

http://www.nyxxunderground.com/SEPTA...7;20screen.jpg

**Centauri** · Oct 8, 2007 21:12

If you want the background images to fill the wider area, then the images themselves need to be wider. In your graphics program, sit two copies of the current image beside each other with a gap at least equal to the current width, and try to fill in the area between such that the lines will join up nicely - then if you delete one of the copies, the remaining original and filled-in portions can then be saved as a new image which will tile horizontally. Horizontal tiling will fill the width no matter how wide the screen is.

**NYXX** · Oct 8, 2007 21:45

I want to create something similiar to this

http://www.wwe.com/

but have an image on either side of the actual website template that way it fits widescreens. I was wondering if it was possible to design such a background image that will encompass the template it looks like this

www.nyxxunderground.com/bg_main.bmp

If so would would I be able to do that without distorting page when resolutions take in effect

**Centauri** · Oct 9, 2007 07:18

What has the wwe site got to do with what you are doing? The wwe site uses a narrow gradient graphic repeated across the page - nothing like the widescreen shot you posted. That bitmap file is one huge picture with a gap in the centre where site content could be placed - again, this seems to have nothing to do with your squiggly line graphics.

Exactly what do you want the background to look / behave like ???

**NYXX** · Oct 9, 2007 09:35

I'm showing the wwe site as an example of what i'd like to do. I want images on either side of my template, and i want it to support resolutions up to 1680x1050

**Centauri** · Oct 9, 2007 16:27

??? - the wwe site does not use specific images on either side.....

As I said before, if you want the background either side of your site to fill full screen width, you need either a background graphic that will tile, or the graphic(s) need to be made as wide as the widest expected resolution (which produces huge, slow loading images).

In the wide screen shot you posted above, I assume you want the black0white squiggly line graphic to fill the gaps? - the only way it can do that is if it is wider than at present - you need to modify the graphics.

**NYXX** · Oct 9, 2007 20:06

Is there a way that I can possibly place an image on top of a repeating background? I think that would be the easiest way possible. The graphics are set to 246 wide, thats the size i want with the rest of being black.

**Centauri** · Oct 9, 2007 20:48

Ok, now we are getting somewhere. The easiest way here is to combine the side graphics with the centre "bg_main.jpg" graphic (as attached to this post), and apply it as a centred background on the body, with the body background colour being black. bg_main.jpg can then be removed from the 766px wide main site table.

As the side graphics are now on the body, the whole outer table (the 100% wide and high one), including its tr's and td's can be removed completely, so the site starts with the 766px wide table, the styling of which will be changed :

Code:

<body>

<table style="height: 920px; width: 766px; border: 0; margin: 0 auto" cellpadding="0" cellspacing="0" >

Note the inline style removed from body tag, and backgrounds removed from table.

The new background graphic can now be applied to the body css :

Code:

body {
 	margin:0px;
 	padding:0px;
 	background: #000 url("images/bg_main.jpg") no-repeat center top;
}

**NYXX** · Oct 10, 2007 10:52

So to be sure these two lines of code can be removed correct.

<td width="50%" valign="top" style="background:url(images/px_left.jpg) top repeat-x"></td>

<td width="50%" valign="top" style="background:url(images/px_right.jpg) top repeat-x"></td>

Apply the other HTml codes in my css and my index.html files where needed.

**Centauri** · Oct 10, 2007 15:32

Remove the present code highlighted red here :

Code:

<body style="background-color:#141414 ">

<table width="100%" style="height:100% " border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" valign="top" style="background:url('images/px_left.jpg')  top repaeat-x  ; "></td>
    <td width="766" valign="top">

	
	<table width="766" style="height:920px; background:url('images/bg_main.jpg') no-repeat top  ; " border="0" cellspacing="0" cellpadding="0">

and

Code:

	</table>

	
	</td>
    <td width="50%" valign="top" style="background:url('images/px_right.jpg')  top repeat-x ; "></td>
  </tr>
</table>



</body>

And then apply the changes I outlined above.

**NYXX** · Oct 10, 2007 17:00

The CSS background code must go into my CSS file correct? Or can it be embedded within my index.html

The new background graphic can now be applied to the body css :
Code:

body {
margin:0px;
padding:0px;
background: #000 url("images/bg_main.jpg") no-repeat center top;
}

**Centauri** · Oct 10, 2007 17:08

It goes in the css file - presentation stuff shouldn't be in the html, as html is all about describing the content. Also, when it is in the css file, the style is available to all pages.

**NYXX** · Oct 10, 2007 17:59

That sounds great and thank you. How will I be able to support multipule pages meaning. Page 1 Will have Bg_main
how about If I want a different background on page 2

Great now this format will support all screen resolutions, windows sizes?

User Tag List

Thread: Help With HTML Background iSSUES

Thread Tools

Display

Help With HTML Background iSSUES

Bookmarks

Bookmarks

Posting Permissions