There is a website: http://ravlextest.freeoda.com/

So the problem is in <section class="legko"> , the background is clipped, since I do not have the skills of css, then I ask for help here, here is the code of the problem block

 <section class="legko" style="background-image: url('/img/men1.jpg');">

Here are his styles:

 .legko { background-position: 50% 100%; height: 100%; background-attachment: fixed; }

Gentlemen, help experts fix it! I have at the moment so:

Example1

And it should be like this!

Example2

 * { margin: 0; } body { position: relative; } .vidsochi { background-position: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #464646; } section .des-block p { margin-top: 32px; font-size: 1.188em; } section { margin-bottom: 2px; position: relative; } section .des-block { padding: 100px 50px 100px 50px; background: url('../img/bgblock.png'); color: #fff; } section .des-block h2 { font-size: 2.313em; } .map iframe { max-height:400px; width:100%; } .vid { background-position: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #464646; } .ico { width: 50px; height: 50px; background-color: #fff; border-radius: 50%; margin-right: 10px; margin-bottom: 10px; float: left; } .ico1 img { margin-left: 9px; margin-top: 6px; } .ico2 img { margin-left: 12px; margin-top: 11px; } .ico3 img { margin-left: 11px; margin-top: 12px; } .ico4 img { margin-left: 13px; margin-top: 11px; } .ico5 img { margin-left: 9px; margin-top: 8px; } .ico6 img { margin-left: 9px; margin-top: 14px; } .ico7 img { margin-left: 10px; margin-top: 9px; } .ico8 img { margin-left: 15px; margin-top: 11px; } .ditem { margin-top: 15px; clear: both; } .txt { padding-top: 5px; overflow: hidden; } .owl-carousel2 .owl-page, .owl-carousel1 .owl-page { display: none !important; } .owl-carousel2 .owl-controlls.clickable, .owl-carousel3 .owl-controlls.clickable { display: none !important; } .form input { width: 100%; margin-bottom: 8px; padding: 13px 4px 13px 15px; font-size: 1.188em; font-style: italic; line-height: 1.2; color: #234c8c; border: 1px solid #264f8f; } .form form input[type="text"]::-webkit-input-placeholder {color:#234c8c;} .form form input[type="text"]::-moz-placeholder {color:#234c8c;} .form form input[type="text"]:-moz-placeholder {color:#234c8c;} section h1 { text-align: center; font-size: 2em; line-height: 1.2; color: #234c8c; } .form { text-align: center; } .form button { background-color: #27bdbe; border: none; box-shadow: inset 0px -3px 0px 0px rgba(0, 0, 0, 0.19); font-size: 1.188em; text-transform: uppercase; color: #fff; line-height: 1.2; padding: 13px 70px 13px 70px; margin-top: 10px; } .frm { padding: 10px 0 25px; position: relative; } .bgf { position: relative; } .kol1 { background: url('../img/kol1.png') no-repeat; position: absolute; left: 0; top: 12px; width: 100%; height: 100%; width: 514px; height: 253px; } .kol2 { background: url('../img/kol2.png') no-repeat; position: absolute; width: 100%; height: 100%; right: 0; top: -19px; width: 514px; height: 253px; } .mesto { background-position: 50% 100%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #464646; } .hochu button { padding: 13px; } .komfort { background-position: 50% 100%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #464646; } .prosmotr button { background-color: #fff; color: #27bdbe; box-shadow: none; border: 1px solid #27bdbe; } .legko { background-position: 50% 100%; height: 100%; background-size:100%; background-attachment:; } .owl-buttons { display: none; position: absolute; top: 60px; right: 417px; width: 30px; height: 22px; border-radius: 25px; border: 1px solid #939598; border-color: rgb(147, 149, 152); background: linear-gradient(to top, #1d9092, #27bdbe); } .owl-prev { position: absolute; left: -1px; top: -1px; background: url('/img/arrowl.png') no-repeat !important; width: 15px; height: 100%; background-size: 6px !important; border-radius: 0px !important; } .owl-next { position: absolute; right: -16px; top: -1px; background: url('/img/arrowr.png') no-repeat !important; width: 15px; height: 100%; background-size: 6px !important; border-radius: 0px !important; } .ploshad { background: url('/img/bg5-1.jpg'), url('/img/bg5-2.jpg'), url('/img/bg5-3.jpg'); position: relative; background-position: left top, center top, right top; background-repeat: no-repeat; background-size: 25% 100%, 50% 100%, 25% 100%; } .top_pr { text-align: center; border-bottom: 1px solid #fff; } .des-prugl { background: url('../img/pramugl.png') no-repeat top center; padding: 10px 0 325px 0; color: #fff; font-size: 1.188em; max-width: 360px; position: absolute; top: 0; right: 218px; } .body_pr { padding: 15px 50px 0 50px; } .top_pr .numb { font-size: 2.313em; } .top_pr .dom { padding-left: 12px; } .pdr0 { padding-right: 0px !important; } .pdl0 { padding-left: 0px !important; } .dc { position: absolute; top: 0; left: 20px; background: url('../img/flag1.png') no-repeat; width: 116px; height: 132px; background-size: 70px; text-align: center; padding-right: 46px; padding-top: 4px; color: #fff; } .dc2 { position: absolute; top: 0; left: 20px; background: url('../img/flag2.png') no-repeat; width: 116px; height: 132px; background-size: 70px; text-align: center; padding-right: 46px; padding-top: 4px; color: #fff; } .dc3 { position: absolute; top: 0; left: 560px; background: url('../img/flag1.png') no-repeat; width: 116px; height: 132px; background-size: 70px; text-align: center; padding-right: 46px; padding-top: 4px; color: #fff; } .item span { font-size: 20px; } .item p { font-size: 12px; } @media screen and (max-width: 768px) { .des-block { padding: 15px !important; } .des-block h2 { text-align: center; font-size: 1.5em !important; } .owl-carousel3 { } .pdr0 { padding-right: 15px !important; } } @media screen and (max-width: 468px) { .kol1 { display: none; } .des-prugl { font-size: 12px; width: 100%; height: 100%; right: 0; } .des-block { padding-bottom: 35px !important; } .pdl0 { padding-left: 0px !important; padding-right: 0 !important; } .pdm { padding: 0px !important; } } >! 
 <section class="legko" style="background-image: url('/img/men1.jpg');"> <div class="container"> <div class="row"> <div class="pdm col-lg-7 col-lg-offset-5 col-md-offset-5 col-sm-offset-5 col-md-7 col-sm-7 col-xs-12"> <div class="des-block"> <h2>Π‘ Π½Π°ΠΌΠΈ Π»Π΅Π³ΠΊΠΎ</h2> <div class="ditem"> <div class="ico ico7"><img src="img/ico11.png"></div> <div class="txt"><b>ΠœΡ‹ пригласим Вас Π½Π° просмотр</b> ΠΈ компСнсируСм Π’Π°ΡˆΠΈ расходы Π½Π° Π΄ΠΎΡ€ΠΎΠ³Ρƒ ΠΈ ΠΏΡ€ΠΎΠΆΠΈΠ²Π°Π½ΠΈΠ΅ Π² случаС, Ссли Π’Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свой Π²Ρ‹Π±ΠΎΡ€ Π½Π° Π½Π°ΡˆΠΈΡ… пСнтхаусах.</div> </div> <div class="ditem"> <div class="ico ico8"><img src="img/ico12.png"></div> <div class="txt"><b>ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ,</b> статус ΠΊΠ²Π°Ρ€Ρ‚ΠΈΡ€Ρ‹, рСгистрация сдСлки Π² РоскомимущСствС ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ ΠΊΠ»ΡŽΡ‡ΠΈ ΠΎΡ‚ Π’Π°ΡˆΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ ΠΊΠ²Π°Ρ€Ρ‚ΠΈΡ€Ρ‹ сразу послС Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ сдСлки - ΠΈΠΌΠ΅Π½Π½ΠΎ это Π΄Π΅Π»Π°Π΅Ρ‚ нашС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅ нСдвиТимости Π‘ΠΎΡ‡ΠΈ.</div> </div> </div> </div> </div> </div> </section> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/common.js"></script> <script src="js/owl.carousel.js"></script> </body></html>

  • No need to add a bunch of code or markup. Remove from the question all unnecessary - and tell me what the problem is. - Pavel Mayorov
  • Pavel Mayorov also says there that he has it (screen is shown), but it must be this way (and the screen is also shown), and even the code of the problem block is given,. - user33274

1 answer 1

you need to add the background-size: cover; property background-size: cover;

example link to sandbox

in your css you need to fix it

 .legko { background-size: cover; background-position: 50% 0; height: 100%; background-attachment: fixed; }

but I would advise to set the background image in css too

 .legko { background-image: url('/img/men1.jpg'); background-size: cover; background-position: 50% 0; height: 100%; background-attachment: fixed; }

then in html will be only

 <section class="legko">

* If the background image is not displayed, check the path to the image