1

Проблема в неполной видимости картинки, при заходе на сайт часть картинки скрывается под header-ом, а часть еще выше(не пойму в чем дело).Когда ставлю код с картинкой в body, ничего не меняется.

Можно ли сделать так, чтобы картинка размещалась верхним краем под header-ом, а header оставался на месте при прокрутке страницы И был прозрачным, так чтобы вся картинка оставалась видна.

Мой код:

html {
height: 100%;
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {
margin: 0px;
font-family: sans-serif;
color: white;
width: 100%;
height: 100%;    
}

header {
height: 60px;

display: inline-block;
vertical-align: top;

color: white;

width: 100%;
padding-bottom: 20px;
}

HTML:

<html lang="ru">
<head>...</head>

<body>

    <header>...</header>

    <div id="center">
        <form>....</form>
    </div>

    <footer> </footer>

</body>
</html>
2
  • html добавьте тоже.
    – edem
    Commented 23 мая 2016 в 18:19
  • @edem , добавил html
    – wiaim
    Commented 23 мая 2016 в 18:42

1 ответ 1

1
html {
    /*60px делаем отступ с верху что не лезло под меню */
background: url(../img/bg.jpg) no-repeat center 60px fixed;
}
header {
    /*будет фиксированным на странице / с верху / и немножко прозрачности(изменить по своему вкусу)*/
position: fixed;
top: 0;
opacity: 0.85;
}
/*дальше думаю разберётесь :) */

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.