Как создать управление фиксированным фоном с CSS? ⇐ Html

[Anonymous]

Я пытаюсь создать фоновый эффект только с использованием чистых CSS.
Я также хочу знать, как я могу сделать его адаптивным. Lang-CSS PrettyPrint-Override ">

Код: Выделить всё

/* --------------------------------

Primary style

-------------------------------- */
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
height: 100%;
}

html {
font-size: 62.5%;
}

body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
color: #0f594d;
background-color: #f2e6cd;
}

a {
color: #93a748;
text-decoration: none;
}

/* --------------------------------

Main Components

-------------------------------- */
.header {
position: relative;
height: 100%;
background-color: #34495e;
z-index: 1;
}

.header h1 {
width: 90%;
color: #f2e6cd;
text-align: center;
font-size: 2.2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

@media only screen and (min-width: 768px) {
.cd-header h1 {
font-size: 3.6rem;
font-weight: 300;
}
}

.background-fixed {
position: relative;
padding: 3em 5% 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

.background-fixed h2,
.background-fixed p {
color: #f2e6cd;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.background-fixed h2 {
font-size: 2.4rem;
margin-bottom: 1em;
}

.background-fixedp {
line-height: 1.6;
font-family: "Merriweather", serif;
}

.background-fixed .light-background h2,
.background-fixed .light-background p {
color: #0f594d;
}

.background-fixed .main-content::after {
/* phone image on small devices */
content: '';
display: block;
width: 100%;
padding: 60% 0;
margin: 2em auto 0;
}

.background-fixed.img-1 {
background-color: #bf5138;
}

.background-fixed.img-2 {
background-color: #f2e6cd;
}

.background-fixed.img-3 {
background-color: #0f594d;
}

.background-fixed.img-4 {
background-color: #db9537;
}

@media only screen and (min-width: 768px) {
.background-fixed {
height: 100%;
padding: 0;
}

.background-fixed h2 {
font-size: 3.6rem;
font-weight: 300;
}

.background-fixed p {
font-size: 1.8rem;
line-height: 1.8;
}

.background-fixed.img-1 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-1.jpg");
}

.background-fixed.img-2 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-2.jpg");
}

.background-fixed.img-3 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-3.jpg");
}

.background-fixed.img-4 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-4.jpg");
}
}

footer {
background: #dadada;
padding: 15px 0;

}

footer p {
color: #000;
text-align: center;
}< /code>

Fixed Background Effect




Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.





Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.




© Copyright 2015

Подробнее здесь: https://stackoverflow.com/questions/309 ... d-with-css