Проблема в неполной видимости картинки, при заходе на сайт часть картинки скрывается под 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>