2016-10-31 1 views
-2

я поместил изображение на моем сайте, фоновое изображение, но я не знаю, почему, это отличается от человека к другому, (по размеру монитора)позиционирование CSS изображение показывает разные по размеру монитора

Пример: на моем компьютере, это показывает, таким образом:

на другом ПК, разного размера монитора, он показал бы по-другому.

Почему это? Я попытался добавить 50% 50% повторения, но он не сработал

Я действительно не знаю, что делать.

CSS:

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

HTML

<body> 
.... 
</body> 

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
 

 

 

 

 

 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}
<body> 
 
    </body>

+0

я добавил код пропущено. До этого у меня был код CSS в вопросе. –

+0

, потому что вы используете обложку, в зависимости от разрешения монитора, зависит от того, как будет выглядеть изображение. Например, в этой скрипте притворяйтесь, что три divs имеют разные разрешения монитора, изображение выглядит по-разному: https://jsfiddle.net/yd39v79p/1/ – Pete

+0

И что мне делать, чтобы исправить это? Добавить как образец изображения с помощью

ответ

0

Одним из решений является использование тега изображения с классом, а затем применить следующий CSS, однако он может стать искажается, если размерность изображения не совпадает ч. монитора.

<img src="your/image/path.jpg class="your-image-class" /> 

Тогда CSS:

body,html { 
    height: 100%; 
    width: 100%; 
} 

.your-image-class { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
Смежные вопросы