Background Filling

[carlosbutler]

I am trying to set a background to fill a whole table. And would like so that if the table is set to 100% the background also changes at the same time.

Thanks

 

[angelwatt]

Depends on the kind of background. Is it one that can repeat, so that it simply fills the area it's assigned? That's the easiest. If it's a fixed size image as a background that you always want the entire picture to be seen as the window adjust size, then it's trickier. Setting the background with CSS can't do scaling like this, at least not current CSS.

What you need to do it use the img tag, place the image using absolute positioning, and its z-index to 0 and everything else around it to 1. Then on the img you can set the width and height to 100% so it'll always fill that spot. Also, on the parent element it'll need position:relative so that when you're using absolute positioning on the img, it'll be easier to position it.

I'm not saying this will be easy to implement, but it's a solution I've seen used.

 

[carlosbutler]

right. i shall give that a go. not really sure if i will get it to work. do you think you could give an example?

also, so i dont have to do another thread, i am trying to get a footer to stay to the bottom of the page. i have sort of managed using bottom:0px but if you scroll down, it moves away from the bottom edge of the browser. if any suggestions on that please say

 

[angelwatt]

Here's a simple example of what I was mentioning. I don't have time to test it out currently though.

td.img {
 position: relative;
}
td.img * {
 z-index: 1;
}
td.img img {
 position: absolute;
 display: block;
 width: 100%; height: 100%;
 z-index: 0;
}

<td class="img">
  <img src="image.png" />
  <p>Some text</p>
</td>

As per the footer question. That can be tricky, especially if you're needing it to handle cases where the content won't fill the entire height of the browser window. There's tutorials out there though for this. I've never needed to do it though so don't have a solution on hand, just ideas.