0

I have a 2000x2000 px image which is set as a background image on my website (as background-image of <body>), but I need this image to be aligned in bottom of the webpage. How can I achieve this?

My CSS is:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow-y: scroll;
}

body {
    background: url('../images/pozadie.jpg') left bottom repeat-x;
}

This answer is not working, when background image is higher than screen height...

Community
  • 1
  • 1
Legionar
  • 7,472
  • 2
  • 41
  • 70

2 Answers2

4

Please try with this.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow-y: scroll;
}

body {
    background: url('../images/pozadie.jpg') repeat-x 0 0;
    position:fixed;
    bottom:0;
}
piyush
  • 554
  • 5
  • 14
2

Use the background-attachment property

body {
    background: url('../images/pozadie.jpg') left bottom repeat-x;
    background-attachment: fixed;
}
AmmarCSE
  • 30,079
  • 5
  • 45
  • 53