4

Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.

I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:

enter image description here

This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:

<style>
.specialImage{
  position: absolute;
  bottom:0;
  right:0;
  z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />

The problem with this is that if the page is longer than the screen, this happens:

enter image description here

No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.

Route 2: the CSS background solution. Unfortunately, this code doesn't work:

body {
  color: #333333;
  background: 
    url("/static/assets/img/fabric_1.png"),
    url("/static/assets/img/stain.png");

  background-repeat: repeat,
    no-repeat;

  background-position: 0 0,
  right bottom;
}

So, I tried this:

   html{
     background:
     url("/static/assets/img/fabric_1.png");
     background-repeat: repeat;
     background-position: 0 0;
   }

   body {
     background:
       url("/static/assets/img/stain.png");

     background-repeat:
                no-repeat;

     background-position:
                right bottom;

   }

Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:

enter image description here

Sonofabitch!

So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.

StackOverflow elders, what should I do?

Thanks!, R

Rich Jones
  • 1,422
  • 1
  • 15
  • 17
  • @WeloSefer - edited out. Irrelevant. – Rich Jones Jan 17 '13 at 06:48
  • check [this](http://jsbin.com/ebaxig/4/edit) out. Your css is correct but I am thinking you are missing some closing tag or your body content doesn't have a div wrapper. – WeloSefer Jan 17 '13 at 07:23
  • @WeloSefer - That produces the scenario in the final picture. Also, and I'm sure you didn't mean to do this, but you seem to have included some SEO spam. – Rich Jones Jan 17 '13 at 07:56
  • @Rich: This may be one of those scenarios where the design needs to be changed. – Ianthe the Duke of Nukem Jan 17 '13 at 11:15
  • @RichJones as lanthe suggested, revise the design or Use firebug `inspect` to see how your elements are arranged. & I didn't mean to include the slipsum A tag. It was a quick copy and past – WeloSefer Jan 18 '13 at 08:14

5 Answers5

2

Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:

body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

Shorter pages are forced to the viewing window height and longer pages picks up the auto height.

Cj Kinberg
  • 21
  • 2
1

As I understand you want to stick background image to bottom and right? so solution is:

body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Nikl
  • 1,064
  • 10
  • 10
  • 1
    That produces the behavior shown in the last picture, which is undesirable for short pages. This works for pages greater than the screen size, however. – Rich Jones Jan 17 '13 at 06:46
1

Hmm, with css3 you can use multiple backgrounds. Can you try this?

html{
     background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
     background-repeat: repeat, no-repeat;
     background-position: 0 0, right bottom;
   }

   body {
     color: #333333;
   }
Tobi
  • 1,440
  • 1
  • 13
  • 26
0

You could always set the height of body to 100% then it should work.

To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:

html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}

body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}

Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.

The purple square is the html-background-image and the reddish is the body-background-image.

The purple square is the html-background-image and the reddish is the body-background-image.

Daniel Figueroa
  • 10,348
  • 5
  • 44
  • 66
  • This works for the first scenario, but produces the scenario shown in the second image for pages longer than 100%. – Rich Jones Jan 17 '13 at 18:27
  • Hmm, if thats the case I'm not sure I understand the question, check this out:http://dunderburken.eu/foo/ the blueish/purple stuff is an background image(repeated) and the red is also an image. I'm guessing that you want the red to be in another place? – Daniel Figueroa Jan 17 '13 at 22:57
0

Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.

Here's my div structure:

<html>                    Background image
<body>                    Padding
<div id="outerWrapper">   Background applied outside content
<div id="borderWrapper">  Contains content
<div id="contentWrap">    Sets up container positioning for child elements
user13500
  • 3,817
  • 2
  • 26
  • 33
Jennifer
  • 1
  • Formatted it a little. Click [edit] below your answer if you want to do changes. I did not re-order anything. Note the *tool-bar* on top of edit box when you are writing. For example **`{ }`** to push highlighted text into code block. (Adds 4 spaces at start of each line.) – user13500 Mar 16 '14 at 17:08