CODEWITHSUNDEEP
htmlcssbackground-image
SeinopSys
SeinopSys

Reputation: 8937

Background positioning to bottom right

I have an HTML page, and this css:

body {
color:#000;
/*BG Image is specified by javascript*/
background-repeat:no-repeat;
background-position:top left;
}

What you have to know, is that the page is not big enough in height, so if loaded correctly, there's a small gap between the bottom of the screen and the last line of text displayed.

I would like to make it so that the background sticks to the bottom right part of the screen, but when I change top left to bottom right, it just seems to stick to the bottom of the webpage (aka where the text ends), rather than to the bottom of the screen. I'm not sure if there is a solution, but if there is, please let me know

Upvotes: 0

Views: 104

Answers (2)

Shivam Shah
Shivam Shah

Reputation: 524

you need a background-size: cover property in the body tag

this will make the background cover the whole body element

try this

body {
    background-position: bottom right;
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-size: cover;
}

Upvotes: 1

Wes Foster
Wes Foster

Reputation: 8900

Try setting height:100%; in the body selector:

body {
  color:#000;
  /*BG Image is specified by javascript*/
  background-repeat:no-repeat;
  background-position:top left;
  height:100%;
}

Upvotes: 0

Related Questions