1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

fitting diagonal background image with fixed background image in CSS

Discussion in 'CSS' started by fraloom, Sep 18, 2007.

0
  1. #1
    hello all,

    Can anyone please tell me how to fit a diagonal bg image all the time (also after resize) with a centered table with the same bg image, so all the diagonal lines fit exactly all the time. The centered table must have a width of 980px with a fixed bg image of 980x10, the main body bg image is 5x5px.

    example here: http://www.newsclick.nl/test.html

    I try to use 3 tables with right-align CSS behavior in the left table but to use all that nested tables makes the website soooooo slow.

    Does anyone have a nice solution for this??

    Thanks a lot!

    best regards
    Fraloom

    Used Html:

    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" title="style" type="text/css">
    </head>
    <body>
    <table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td background="/bgtop.png">
    <div align="center">
    </div></td>
    </tr>
    </table>
    </body>
    </html>


    Used CSS:

    body {
    margin: 0; padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: Silver;
    background-image: url(bg.png);
    }

    a:link {
    color: Silver;
    text-decoration: underline;
    }

    a:visited {
    color: Silver;
    text-decoration: underline;
    }

    a:hover {
    color: #292F33; background-color:#f6821b; text-decoration:none;
    }
     
    fraloom, Sep 18, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Don't put it on the table leaving the table background transparant, then center the background.

    aka change the background declaration in body to:
    background:url(bg.png) top center;

    Oh, and if you are only having one cell or column, don't waste a table on it either.
     
    deathshadow, Sep 18, 2007 IP