SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Michigan
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Background Images? Possible?

    Hello,

    I am trying to find if there is a way with css to use two background images on a page. One would be somewhat big and fixed at the top left and will not replicate, or scroll.

    The second should be about 3 pixels big and will replicate to cover the remaining area.

    Is this possible? If so, how?

    Thanks!

  2. #2
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just use CSS

    Code:
    body {
      background-image:url("background.jpg");
      background-repeat:repeat;
      }
    
    #logo {
      position:absolute;
      top:15px;
      right:20px
      }
    Now the body will automatically have the background image set to "background.jpg" and will repeat both on teh x and y axis, if you want it to only rep[eat on one axis, specify either:

    Code:
    background-repeat:repeat-x
    or:

    Code:
    background-repeat:repeat-y
    To add the single image to your site, use the image tag with the attached ID:

    Code:
    <img id="logo" src="image.jpg" alt="Logo Image" title="" />
    This will place the image with the ID of "logo" at the absolute position, 15 pixels from the top of the window, 20 pixels from the right...

    If you need any more help, let me know

    Now, in your case, set the 3px high image in the body, this is the one that will repeat over and over, and the logo image (I assume it is a logo) in the <img> tag...

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change "position:absolute;" to "position: fixed;" and it won't scroll (not very well supported though..)

    Douglas
    Hello World

  4. #4
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I asked this before and no one could give me an answer, but can I set two repeating background images?

    ie one going across the top and one down the side

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    platinum: How about this: the left hand one, by body repeat-y, and the one accross the top, a div,position: absolute; width: 100%; background: repeat-y; height: whatever?

    Douglas
    Hello World

  6. #6
    SitePoint Zealot Lauren's Avatar
    Join Date
    Aug 2002
    Location
    North Carolina
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info. I ended up settling on using a fixed background image for the corner and a background color for the rest of the page when I was faced with the same issue.
    Lauren and Auster



    The dog is a reflection of his master. - Max v. Stephanitz

  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)
    I have been wanting CSS to allow multiple backgrounds for some time now. It would make rounded corners, oh, so much easer! We need to start a petition... ;-)

    Anywho, there isn't the facilities to do what you want in CSS, atm. That means you're going to 'position: fixed' like has been said. IE doesn't support it (but Opera and Moz, do--who would'a thunk it, right? ;-), though. I'd float the logo for IEs sake (but that'll mean it'll scroll with the page) and use fixed positioning (which IE will ignore) to get the proper effect.

    If you're really need it not to scroll, you could use a script for IE, like what geocities use to employ--check out DynamicDrive for examples. Or, you can wrap all the content in a <div>, and use a fixed background (which is far better supported than fixed positioning) on that, but make sure they're isn't any padding or margins between the div and the window borders, because IE does get fixed positioning a little buggy. Of course, using the nested div means that the background would be cut off on small pages where the content length doesn't exceed the pictures size.

    It's all up to you, though. :-)

    ~~Ian
    Last edited by Ian Glass; Sep 8, 2002 at 04:03.

  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Ian Glass
    Of course, using the nested div means that the background would be cut off on small pages where the content length doesn't exceed the pictures size.
    You could then put an image (1px transparent) in the div, set it to float:left and make it the height of the bg image (will streach the div so it doesn't get too small)

    hth,
    Douglas
    Hello World


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
  •