DIV контейнер с позиции фонового изображения фиксированного

Я хочу создать страницу, как это: Page DIV контейнер с позиции фонового изображения фиксированного

Я не хочу, чтобы поместить изображение в качестве фона. Я хочу создать контейнер div, и этот контейнер div имеет фоновое изображение. И под этим div должен быть другой div. И если я прокручу div под div, фоновое изображение должно перейти по div с фоновым изображением. У меня есть что-то, но это дерьмо. Вот моя страница: 1

Вот код:

*{ 
    font-family: "Open Sans"; 
    margin: 0px; 
    padding: 0px; 
    font-size: 18px; 
} 
html { 
    height: 100%; 
} 
body{ 
    height: 100%; 
    background-image: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') !important; 
    background-repeat: no-repeat !important; 
    background-position: 50% 0 !important; 
    background-size: auto !important; 
    background-color: transparent !important; 
    background: inherit; 
} 

nav{ 
    background: url("images/line-header.png") repeat-x scroll center bottom #4A525A; 
    padding: 15px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
} 

nav > ul{ 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 

nav ul > li{ 
    margin-left: 25px; 
    display: inline-block; 
    list-style-type: none; 
} 

nav ul li > a{ 
    display: block; 
    text-decoration: none; 
    color: black; 
    color: #697683; 
    transition: color 0.5s; 
} 

nav ul li > a:hover{ 
    color: #FFF; 
} 

.content{ 
    height: 1000px; 
    margin-top: 500px; 
    background-color: orange; 
}

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="index.css" > 
     <!-- Open Sans --> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 

      <nav> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
       </ul> 
      </nav> 

      <div class="content"> 
       <h1></h1> 
      </div> 

    </body> 
</html>

источник

2015-01-01 Skeptar

'div'-ception o_o –

Просто добавьте еще один div и установить background-attachment в fixed

.background{ 
    background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    height: 500px; <------can make 500px instead of using margin-top: 500px on .content 
} 


.content{ 
    height: 1000px; 
    background-color: orange; 
    /*margin-top: 500px;*/ <-------------take out 
}

FIDDLE

источник

2015-01-01 17:41:18 jmore009

Спасибо, что отлично! И как я могу изменить высоту картины сейчас? Я хочу высоту: 100% картинки. Но картина не должна быть растянута. только реальная высота. Например, изображение имеет высоту 200 пикселей, и я не хочу писать высоту: 200 пикселей. Я хочу написать высоту: 100%, а высота - 200 пикселей. Надеюсь, вы меня поймете: D И спасибо за ответ! Вы получаете зеленый крючок. – Skeptar

Я хочу настоящую высоту и реальную ширину фонового изображения ... – Skeptar

Если вы хотите, чтобы фактическая высота и ширина просто удаляли 'background-size: cover', и это оставит изображение размером, которое оно на самом деле – jmore009

Вы можете попробовать это, добавить изображение высотой 700px и background-attachment: fixed;

*{ 
    font-family: "Open Sans"; 
    margin: 0px; 
    padding: 0px; 
    font-size: 18px; 
} 
html { 
    height: 100%; 
} 
body{ 
    height: 700px; 
    background-image:url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-  images/748028443.png') !important; 
    background-repeat: no-repeat !important; 
    background-position: 50% 0 !important; 
    background-size: auto !important; 
    background-color: transparent !important; 
    background-attachment: fixed; 
} 

nav{ 
    background: url("images/line-header.png") repeat-x scroll center bottom #4A525A; 
    padding: 15px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
} 

nav > ul{ 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 

nav ul > li{ 
    margin-left: 25px; 
    display: inline-block; 
    list-style-type: none; 
} 

nav ul li > a{ 
    display: block; 
    text-decoration: none; 
    color: black; 
    color: #697683; 
    transition: color 0.5s; 
} 

nav ul li > a:hover{ 
    color: #FFF; 
} 

.content{ 
    height: 1000px; 
    margin-top: 500px; 
    background-color: orange; 
} 


<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="index.css" > 
     <!-- Open Sans --> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 

      <nav> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
       </ul> 
      </nav> 

      <div class="content"> 
       <h1></h1> 
      </div> 

    </body> 
</html>

источник

2015-01-01 19:12:29 Denise

Спасибо за ответ! :) Ваш ответ тоже приятный, но в моем случае другой ответ более полезен. – Skeptar

DIV контейнер с позиции фонового изображения фиксированного

ответ

Смежные вопросы