Skip to content

Instantly share code, notes, and snippets.

@OlgaCoin
Created October 3, 2016 07:58
Show Gist options
  • Select an option

  • Save OlgaCoin/d3c495628ad3cab429aad0c0fd1bf739 to your computer and use it in GitHub Desktop.

Select an option

Save OlgaCoin/d3c495628ad3cab429aad0c0fd1bf739 to your computer and use it in GitHub Desktop.
Image full-screen-sized
.image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 650px;
width:100%;
overflow: hidden;
}
.img__content {
height: 100%;
margin: 0 auto;
width: 1140px;
position: relative;
}
.img__content h1 {
padding-top: 300px;
color: #fff;
font: 65px/70px sans-serif;
}
.img__content p {
margin-top: 28px;
margin-bottom: 42px;
font: 18px/28px sans-serif;
color: #cecece;
}
.image2 {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 650px;
width:100%;
overflow: hidden;
}
<div class="test">
<div class="image" style="background-image: url(img/slider/1.jpg)">
<div class="img__content">
<h1>Hello world</a></h1>
<p>Широкий ассортимент коллекций ведущих производителей<br>
Ежедневное поступление товара</p>
</div>
</div>
</div>
<!--Bootstrap-->
<div class="test2">
<div class="image2" style="background-image: url(img/slider/2.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="img__content">
<h1>Hello world</a></h1>
<p>Широкий ассортимент коллекций ведущих производителей<br>
Ежедневное поступление товара</p>
</div>
</div>
</div>
</div>
</div>
</div>
@media only screen and (max-width:1279px){
.image, .image2 {height: 542px;}
.img__content h1{padding-top:300px;font-size:60px;line-height:.5}
.img__content p{margin-top:32px;margin-bottom:38px}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.image, .image2 {height: 407px;}
.img__content h1{padding-top:150px;font-size:46px;line-height:.6}
.img__content p{margin-bottom:29px;font-size:16px}
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.image, .image2 {height: 304px;}
.img__content h1{padding-top:80px;font-size:38px;line-height:.8}
.img__content p{font-size:14px;line-height:1.4;margin-top:21px}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.image, .image2 {height: 270px;}
.img__content h1{padding-top:40px}
.img__content p{display:none}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment