CODEWITHSUNDEEP
csshtml
user2658578
user2658578

Reputation: 365

Why is my background positioned wrong in this simple example

When I test this about 30% of the lower part of the image is being positioned at top right.

I can't understand why.

If I for example positioned top left or top right it works fine.

It never works if I give positioned as in this example bottom right or bottom left.

If I give positioned bottom left then again about 30% of the lower part is being positioned at top left.

Here is the complete markup and css

<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8" />
      <title></title>
      <style type="text/css" media="screen">
         body
         {
            background-image:url(uppsala.jpg);
            background-position: bottom right;
            background-repeat:no-repeat;
         }
      </style>
   </head>

<body>
</body>
</html>

Upvotes: 0

Views: 49

Answers (2)

Love Trivedi
Love Trivedi

Reputation: 4046

You should declare height in css rule

body,html
         {
            background-image:url(uppsala.jpg);
            background-position: bottom right;
            background-repeat:no-repeat;
            height:100%;
         }

Upvotes: 0

JJJ
JJJ

Reputation: 33163

The image is at the bottom right of the body element, but the problem is that the element isn't as tall as you think it is so it looks like it's in the wrong place.

Add this to the CSS rules:

body, html {
    min-height:100%;
}

Upvotes: 2

Related Questions