Я пытаюсь создать фоновый эффект только с использованием чистых CSS.
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
< /code>
вот мой css: < /p>
/* --------------------------------
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/w ... /img-1.jpg");
}
.background-fixed.img-2 {
background-image: url("http://halloweenmaternitycostumes.com/w ... /img-2.jpg");
}
.background-fixed.img-3 {
background-image: url("http://halloweenmaternitycostumes.com/w ... /img-3.jpg");
}
.background-fixed.img-4 {
background-image: url("http://halloweenmaternitycostumes.com/w ... /img-4.jpg");
}
}
footer {
background: #dadada;
padding: 15px 0;
}
footer p{
color: #000;
text-align:center;
}
< /code>
Есть идеи, как это сделать с помощью CSS? Вот мой jsfiddle: https://jsfiddle.net/v7a58odd/1/
Подробнее здесь: https://stackoverflow.com/questions/309 ... d-with-css
