SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With HTML Background iSSUES

    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

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Depending upon the browser, because the TD is set to 50&#37; 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?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would I need to remove the repeat-x if I change the &#37; to pixels?

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    ?

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As that "template" uses an incomplete doctype and tables for layout, you should not have paid ANY money for it ......

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you mean incomplete?
    Last edited by NYXX; Oct 7, 2007 at 09:08.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NYXX View Post
    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.

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would i do that?

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ?

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by NYXX; Oct 8, 2007 at 22:22.
    ]

  16. #16
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ???

  17. #17
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ]

  18. #18
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ??? - 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.

  19. #19
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ]

  20. #20
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Attached Images Attached Images

  21. #21
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So to be sure these two lines of code can be removed correct.

    <td width="50&#37;" 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.
    ]

  22. #22
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    ]

  24. #24
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  25. #25
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    ]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •