Прикрепить изображение в верхней части страницы, без прокрутки для img, в элементе body

У меня следующая проблема. Я думаю, что есть быстрый способ сделать это, но сейчас я не могу найти способ решить это.

Итак, у меня есть изображение, и я хочу, чтобы оно было в качестве фонового изображения ТОЛЬКО в верхней части страницы в <body> элемент. В настоящее время он движется вниз страницы, если я прокручиваю вниз.

У меня есть следующий код:

body {
    color: #d0d0d0;
    font-family: Verdana, Tahoma, sans-serif; 
    font-size: 12pt;
    font-weight: 400; 
    font-style: normal;
    line-height: 1.5; 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    z-index: 0;
    background:url(../img/main-bg-top.png) no-repeat top center;
    background-attachment: fixed;
    background-size: cover;
}
Источник

1 ответ

Решение

Ну, вы могли бы создать другой класс и вставить его перед всем вашим контентом, что-то вроде этого: Jsfiddle

body {
    color: #d0d0d0;
    font-family: Verdana, Tahoma, sans-serif; 
    font-size: 12pt;
    font-weight: 400; 
    font-style: normal;
    line-height: 1.5; 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    z-index: 0;
    background:#000;
}
.top-image{height:0;}
.top-image img{max-width: 100%;}
.container{height:900px; }

HTML:

<div class="top-image">
    <img src="http://www.wormzweb.com/images/photoalbum/album_28/nature_2118.jpg">
</div>
<div class="container">
    <p>random text.</p>
</div>

Это был быстрый набросок, обходной путь с лучшим для вас способом и правильным способом написания кода, если хотите.

Источник
Другие вопросы по тегам