как отцентрировать изображение с прикрепленным фоном - PullRequest
Новая
       5

как отцентрировать изображение с прикрепленным фоном

0 голосов
/ 16 января 2020

У меня есть такая проблема, что при вставке фиксированного эффекта он показывает только половину изображения, я хочу видеть все изображение с правой стороны, пока я адаптирую его к мобильному устройству 

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.container {
   margin: 200px 0;
   background: #ccc;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.content:nth-child(2) {
   background: url(http://imgfz.com/i/sPTEXhi.png) no-repeat fixed #ccc;
   background-position: 100% 100%;
	 background-size: contain;
   height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
<div class="container">
    <div class="content">
     <h2>Title Website<h2>
     <p>
     Lorem ipsum dolor sit amet consectetur 
     adipisicing elit. In,sequi.
     </p>
    </div>
    <div class="content"></div>
</div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Просто удалите фиксированный и используйте background-size: 

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.container {
   margin: 200px 0;
   background: #ccc;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.content:nth-child(2) {
   background: url(http://imgfz.com/i/sPTEXhi.png) no-repeat #ccc;
   background-position: 100% 100%;
   background-size: 100% 100%;
   height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
<div class="container">
    <div class="content">
     <h2>Title Website<h2>
     <p>
     Lorem ipsum dolor sit amet consectetur 
     adipisicing elit. In,sequi.
     </p>
    </div>
    <div class="content"></div>
</div>
</body>
</html>
0 голосов
/ 16 января 2020 

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.container {
   margin: 200px 0;
   background: #ccc;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}
.content:nth-child(2) {
   background: url(http://imgfz.com/i/sPTEXhi.png) no-repeat fixed #ccc;
   background-position: center;
	 background-size: contain;
   height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
<div class="container">
    <div class="content">
     <h2>Title Website<h2>
     <p>
     Lorem ipsum dolor sit amet consectetur 
     adipisicing elit. In,sequi.
     </p>
    </div>
    <div class="content"></div>
</div>
</body>
</html>
...