2014-09-20 5 views
2

У меня есть следующая проблема. Я думаю, есть быстрый способ сделать это, но сейчас я не могу найти способ его решить.Прикрепить изображение вверху страницы, без прокрутки для img, в элементе корпуса

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

У меня есть folllowing код:

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; 
} 

ответ

2

Ну вы могли бы создать еще один класс и вставить его перед всем вашим содержанием, что-то вроде этого: 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> 

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

+0

Я попробовал, но по какой-то причине это не сработало. Позвольте мне попробовать ваш метод. – user3661795

+0

Вы радушны bro;) pls считают маркировку моего ответа как правильно. –

+0

Отмечено, и вы радушны;) – user3661795