SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to load a background image for entire space of pat of the Web page

    Hello,

    I want to load a background image into part of the Web page, so that the background image auto resizes to fill the entire space of the cell.
    But not the spaces above or below the cell that should have the background image.
    A good example is like bing.com
    That is I want to have the Top Navigation bar & Footer Navigation bar, to have no background image. But the background image to cover the
    entire space of the Table Cell between the Top Navigation bar & Footer Navigation bar.
    How does one do this?

    Thanks.

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It's easy these days, using the background-size property. For example, you can get a background image to cover an element with

    Code:
    element {
      background-size: cover;
    }
    However, I don't know if this works on table cells, and I dare say a table is not what you should be using here.

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    How/Where do I specify the background image file path (src) in above code?

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by WorldNews View Post
    How/Where do I specify the background image file path (src) in above code?
    This is the basic setup:

    Code:
    element {
      background-image: url(/images/bg.png);
      background-size: cover;
    }

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It is working OK.
    You can see it here:
    http://www.smartswin.com/

    Thanks.


    Quote Originally Posted by ralph.m View Post
    This is the basic setup:
    Code:
    element {
      background-image: url(/images/bg.png);
      background-size: cover;
    }

    Anoox search engine volunteer

    www.anoox.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Great! I do wish you'd lose the table, though.

  7. #7
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Actually I have a follow up question. Well 2 actually.

    1- How would one make the background image change every X Seconds by gently sliding to right or left ?

    2- How would one upload a new background image by user clicking on a next button? Of course load the new background images without going to the server but have them seamlessly loaded from client side.

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you talking about an image slider?

    Something like this perhaps. There are quite a few around.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, as Paul says, there are tons of these around. Most use inline images rather than background images, although that can be changed. Here is one that seems to use bg images out of the box: http://demo.marcofolio.net/bgimg_slideshow/

    Still, this is a trickier area, and a gallery like this won't play nicely with tables, I'd think.


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
  •