SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member Pricey's Avatar
    Join Date
    Apr 2002
    Location
    Qld, Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Background Images

    Hi,

    I am having trouble with an image that i need to put in a table to be the backgroung image for the page. I have created the image and set as the background of the table and everything there is fine but what i need is for the image not to repeat itself.

    I have read (somewhere in here i think?) that when creating background images to make them say 1600 * 1200 that wat the images wont repeat and this is working fine with me horizontally but not vertically because the page becomes ridiculiously long to accomodate for the long background image.

    Does anyone have any ideas on this??

    Cheers

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is easy with CSS. You can set it so that the image will not repeat.. and placement of the image.

    Makeing one huge image would work too, but I feel sorry for the poor fools still on 56k.

    try something like this

    Code:
    <style>
    
    body
    {
    background: url(images/dashline.gif) #000066 fixed repeat-y 12% 50%;
    }
    </style>

    try inserting this in your head tags.

    the #00066 is the background color, you can put anything in there even transparent

    the repeat-x means that it only repeats on the x axis on the web page..hench horazontically only

    and the 12% 50% is the positoion the page relative to the screen size. I believe that this same could will also work as a class.. you would have to change it around a little bit. But it should work if you are trying ot set a background image in one table only.

    Gook luck,

    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  3. #3
    SitePoint Member Pricey's Avatar
    Join Date
    Apr 2002
    Location
    Qld, Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.

    The css you gave me is working great except the bacground image is the background of the page, when i need it to be the background of a table. is there anyway of putting this into the table?

    This is using the css in the head and the result is exactally what i am after except for the positioning. see below.

    http://www.reiq.com.au/realbiz/realbiz02_test1.htm

    this was my first attemp using the background attribute in the table tag. this is what i want to steer away from as the bachground image has massive dimensions so as not to repeat. see below.

    http://www.reiq.com.au/realbiz/realbiz02_test2.htm

    So basically what im trying to achieve is the results of test1.htm with the positioning of test2.htm.

    Any help always appreciated.

    Cheers

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try somethign like this


    Code:
    <html>
    <head>
    <style>
    .tablebg
    {
    background: url(images/dashline.gif) #000066 fixed repeat-y 12% 50%;
    }
    </style>
    
    <body>
    
    <td class="tablebg">
    blah blah
    </td>
    
    
    </body>
    </html>
    that should put the image in a background of only the table you set the class too.

    If you need more help .. send me the code .. and I'll help you out more.


    Chuck
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  5. #5
    SitePoint Member Pricey's Avatar
    Join Date
    Apr 2002
    Location
    Qld, Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Chuckie

    I have ended up using this code

    <style>
    body
    {
    background: url(backtest.gif) transparent fixed repeat-X repeat-Y 0% 0%;
    background-attachment: fixed;
    }
    </style>

    to create this effect

    www.reiq.com.au/realbiz/realbiz02.htm

    The background is a 50k .gif - do you think this is too large for a background?

    Cheers and thanks!

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll want to change what you're currently using to the code I've posted below.
    Code:
    <style type="text/css">
    <!--
    BODY {
      background: url(backtest.gif) #ffffff repeat fixed 0;
    }
    -->
    </style>
    And, yes, 50 K is a bit large just for a background image. Part of the problem is that you saved it as a GIF, when an image like that really should be optimized as a JPEG.

  7. #7
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here, your current rule is needlessly redundant, why not try:
    Code:
    body { 
     background: url(backtest.gif) transparent no-repeat fixed;
    }
    But if you have an image that's 1600 by 1200 pixels and is 50K, you really have a problem! Your whole page shouldn't be 50K (aim for 25K or less).

    The "make the background larger than the display" idea is really old and you don't need it with CSS. Chuckie had it right. :-)

    EDIT: Geeez, your entire site is images! You can really save a lot of bandwidth with using text and CSS. And it's much more accessible to people who can't see those images (i.e. the blind).

    ~~Ian

  8. #8
    SitePoint Member Pricey's Avatar
    Join Date
    Apr 2002
    Location
    Qld, Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys.

    Have been a bit rushed today and didnt really examine the code, just wanted it to work!

    Ive updated the css as suggested by ian and reduced the background image to around 20k as a .jpg

    thanks for the pointers

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see the point of setting transparent as your background color. Nothing can go "behind" the background, so there won't really be any transparency.


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
  •