2013-09-07 2 views
0

Когда я проверяю, что около 30% нижней части изображения находится в верхнем правом углу.Почему мой фоновый рисунок ошибочен в этом простом примере

Я не могу понять, почему.

Если я, например, расположил верхний левый или правый верх, он отлично работает.

Это никогда не работает, если я даю позиционирование, как в этом примере внизу справа или внизу слева.

Если я даю расположенное внизу слева, то снова около 30% нижней части находится в левом верхнем углу.

Вот полная разметка и 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> 

ответ

2

Изображение находится в нижней правой части элемента тела, но проблема в том, что элемент не столь высок, как вы думаете, это так выглядит как будто это не в том месте.

Добавьте это к правилам CSS:

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

Вашей AnSer работе, но я не понимаю, что вы имеете в виду. Если я использую только мой код, ничто не отображается внизу справа, показывается только 30% в верхнем правом углу. Можете ли вы лучше объяснить, что вы имеете в виду. – user2658578

+0

Тег '' не автоматически закрывает весь экран просмотра, т. Е. Его высота не равна 100%. Вы можете видеть, что я имею в виду, если вы добавляете фоновый цвет в тело вашего кода. – JJJ

+0

Фоновый цвет заполняет весь видовой экран, но когда я использую границу: 1px сплошной красный; Я вижу, что происходит. Изображение находится в правом нижнем углу. – user2658578

0

Вы должны объявить высоту в правиле CSS

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

Этого недостаточно, 'html' должен быть установлен на' height: 100% '. – JJJ

Смежные вопросы