CODEWITHSUNDEEP
htmlcssbackground-image
Valentin Coudert
Valentin Coudert

Reputation: 1919

Background-image not being positionned at right bottom

I'd like to have an image (kind of logo) positioned in the bottom right corner of my page.

The page is very simple:

The header is of fixed height. The #content can have very different height and it changes dynamically.

The CSS I use:

html: {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
  width: 100%;
  background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg');
  background-repeat:no-repeat;
  background-size: 100px;
  background-position: right bottom;
  background-color: grey;
}

header {
  width: 50%;
  height: 180px;
}

#content {
  width: 50%;
}

The HTML:

<html>
  <body>
    <header>
    </header>
    <div id="content">
    </div>
  </body>
</html>

enter image description here

On the left is what happened when the #content height is bigger than the screen, on the right when it's smaller. The cloud in the drawing represents the background image. You can see on the left that it's displayed in the bottom right corner of the screen, not of the <body> (not the expected behavior).

What am I doing wrong?

NB: I can't reproduce such behavior on JSFiddle.

Upvotes: 0

Views: 1120

Answers (1)

David Nguyen
David Nguyen

Reputation: 8528

html tag requires a height declaration as well:

html { height: 100% }

Upvotes: 1

Related Questions