CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
Robert
Robert

Reputation: 10380

CSS body background position right bottom not working

I am trying to place a background image in the background of the body tag using right bottom but for some reason the image almost totally appears out of view. Besides a solution I would like to also understand why this is not working as I expected. I changed the combination to other settings like left bottom and still image is out of view.

The image is this one: https://i.sstatic.net/fpKuw.jpg?s=328&g=1

body {
	background-image: url(https://i.sstatic.net/fpKuw.jpg?s=328&g=1);
	background-repeat: no-repeat;
    background-position:  right bottom; 
}
<body>

</body>

Upvotes: 2

Views: 4771

Answers (2)

dippas
dippas

Reputation: 60543

The body doesn't have enough height yet to get the image rendered as expected, so you can to this in a couple ways:

  • set html, body { height:100%}

html,
body {
  height: 100%
}
body {
  background: url(https://i.sstatic.net/fpKuw.jpg?s=328&g=1) no-repeat right bottom;

}

  • set body { height:100vh}

body {
  background: url(https://i.sstatic.net/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
  height: 100vh
}

Upvotes: 7

yuvalsab
yuvalsab

Reputation: 465

This is because there is nothing in the body, there is just not enough space for the image to appear.

Example: https://jsfiddle.net/hhs8jvgr/

Upvotes: 1

Related Questions