Search code examples
cssrepeatbackground-position

CSS How do i repeat a background image horizontally and always keep it at the bottom of a webpage?

I am new to CSS and am tinkering with a few options. I want a pic called 'toplayer.jpg' to be repeated horizontally at the bottom of my webpage. I have used this code in an external style sheet. The pattern repeats horizontally...however it floats to the top of the page.

body {
    background-image: url("../Images/toplayer.jpg");
    background-position: bottom;
    background-repeat: repeat-x;
}

Any suggestions for this noob would be appreciated. Thank you.

Solution

  • Your background declarations should work, I guess the issue is that the body tag has no height :

    html,body {
  height: 100%;
}
body {
  background-image: url("https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg");
  background-position: bottom;
  background-repeat: repeat-x;
}