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

HTML & CSS
1

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.

2

It’s easy these days, using the background-size property. For example, you can get a background image to cover an element with

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

Ralph,

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

4

This is the basic setup:

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

Hi,

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

Thanks.

6

Great! I do wish you’d lose the table, though. :wink:

7

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,

8

Hi,

Are you talking about an image slider?

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

9

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.