1

I am trying to keep an image attached to the bottom-left of my page, but unlike How to keep background image on bottom left even scrolling, I do not want the image to follow the user as they scroll.

I have a feeling it has something to do with making #wrap fill up the entire window, but I can't seem to figure out how.

I am using normalize, with this code appended to the style sheet:

body {
    background-image:url('/img/graph-paper3.png');
    background-repeat:repeat;
}

#container {
    width:960px;
    margin:0 auto;
}
#sidebar {
    float:left;
    width:310px;
    padding:10px;

}

#main {
    float:right;
    width:610px;
    padding:0 10px 10px 10px;
    margin-top: 40px;
    background-image:url('/img/top.png');
    background-repeat:no-repeat;
    background-position:top center;
}

#paper {
    margin:40px 0 147px 0;
    padding:20px;
    background-color:#ffffff;
    min-height:400px;
}

#footer {
    clear:both;
    padding:5px 10px;

}
#footer p {
    margin:0;
}

#wrap {
    background-image:url('/img/jeremy-david.png');
    background-repeat:no-repeat;
    background-position:left bottom;
}

You can see the code in action here: http://www.jeremydavid.com.

Community
  • 1
  • 1
Jeremy
  • 925
  • 2
  • 11
  • 22
  • You want background-position:fixed; ? – ShibinRagh May 19 '12 at 06:55
  • There are a couple mistakes. Validate your page using http://validator.w3.org/. There are unclosed divs and some other stuff which might be causing it. I am working on finding the solution. – Itay Grudev May 19 '12 at 07:53
  • I just fixed the two unclosed divs, which explains where all those glitches were coming from. Thanks – Jeremy May 19 '12 at 08:00

2 Answers2

2

How about:

.bottom-image{
    position: absolute;
    bottom: 0px;
    left: 0px;
}

This will position the image absolutely to the page. (Make sure it isn't a child of another absolute or relative or fixed positioned element).

Itay Grudev
  • 7,055
  • 4
  • 54
  • 86
  • This is a really good idea. The only problem is that would put the image in front of anything (if the browser window is very small, etc.). Is there a way to push it back? – Jeremy May 19 '12 at 06:59
  • 1
    Yes there is. You can use z-index to send it to the back. And use it also on the element that you wish to send to the front. Note that to use z-index you both elements which you want to "z-order" have to be positioned absolute, relative or fixed. – Itay Grudev May 19 '12 at 07:01
1

Use

.bottom-image {
  max-width: //some % 
  z-index: -100;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

You can also use

#wrap{ //your main #wrap container
  background: url('/img/jeremy-david.png') no-repeat bottom left;
}
Igor Konopko
  • 764
  • 2
  • 13
  • 26
  • Ah yes, I was just about to say the previous solution has a glitch when I shrink the browser window. This corrects it and the image is always at the bottom now. – Jeremy May 19 '12 at 07:10
  • @Jeremy I thought that you don't want it to be automatically scrolled. So position fixed wasn't a solution ... ? – Itay Grudev May 19 '12 at 07:17
  • @Itehnological You are right - I thought the image was correcting itself, and didn't realize it was spanning across the whole page. Is there a way to deal with the small browser window problem and the space it creates at the bottom? – Jeremy May 19 '12 at 07:24
  • @Jeremy Can you send me a link or jsFiddle to the page you are working on. I am really good at HTML and CSS and I should be able to help you. – Itay Grudev May 19 '12 at 07:32
  • @Itehnological sure, it is www.jeremydavid.com – Jeremy May 19 '12 at 07:34
  • @Jeremy How do you think the image should be like? Can you fully describe it. Should it appear always behind the content in the bottom left corner or it should be just in the bottom of the page. Sorry about that I have to know how you imagine it to help you. – Itay Grudev May 19 '12 at 07:44
  • I just changed my message, maybe that solution will satisfy you – Igor Konopko May 19 '12 at 07:45