As you can impose such a site, the difficulty is that at the top of the background header to the left and right of the center is different, and the center is fixed. And this should be done using bootstrap

enter image description here

  • And on the phone or tablet, how should it look? 1000px for the phone is still unreal. If the thetephone is not needed, why bootstrap? It is still not clear - that 1000px is a type of window on top (superimposed over the background), or? - Nikolay
  • The width is written for example only. The difficulty for me is that there is one background on the left, and another on the right, and this background should stretch on any monitors and in the center there should be a cap that dock with the left and right backgrounds. - helen

2 answers 2

Thank you for answering my question. I tried your code. If you try to reduce the browser (to the left it checked how it works when the screen is reduced) and all the columns are arranged one under the other. Those. The whole cap is untied. Simplified the task made the background through a gradient (in the code just plain for example). Here I wrote my version of the lack of why the length of the text container is limited by the text but I wanted to press the footer to the bottom. And when moving to the left, ie, reducing the browser, the right center enters my menu. Maybe tell me.

html { width: 100%; height: 100%; } body{ width: 100%; height: 100%; } .header-blu{ margin:0px; padding:0px; min-height: 75px; margin-left: -15px; margin-right: -15px; } .header-top{ position: relative; margin:0px; padding:0px; min-width: 1px; } .left-top { /* background: url(../images/centr-1.jpg);*/ width: 50%; position: absolute; left: 0px; height: auto; min-height:265px; } .right-top{ width: 50%; position: absolute; right: 0px; margin:0px; padding:0px; min-height:265px; } .header-top-center{ margin:0px; padding:0px; min-height:1px; } .header-center{ position: relative; margin:0px; padding:0px; min-height:1px; } .left-center { position: absolute; left: 0px; top:0px; width:300px; min-height:265px; } .right-center { position: absolute; margin-left: 300px; right:0px; top:0px; width: 650px ; min-height:265px; } .text{ padding:0px; margin:235px 0 0 0; } .color_pink_light { background-color:#F59193; } .color_pink{ background-color:#EA5858; } .color_blue{ background-color:#4B9FC6; } .color_white{ background-color: white; } .color_grey{ background-color: #E4E4E4; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> </head> <body class="color_grey"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 col-sm-12" > <div class="header-top "> <div class="header-blu color_pink_light"> верхний фон </div> <div class="left-top color_blue">left-top</div> <div class="right-top color_pink">right-top</div> </div> </div> </div> <div class="container" > <div class="row"> <div class="col-md-12 col-sm-12"> <div class="header-center"> <div class="left-center color_blue"> <aside class='col-md-12 col-sm-12'> <ul> <li>home</li> <li>not home</li> <li>contact</li> </ul> </aside> </div> <div class="right-center color_pink"> Картинка шапка </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="text color_white"> text <br> text <br> text <br> text <br> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 color_grey"> <div class="footer "> footer <br> footer<br> footer<br> footer<br> footer<br> </div> </div> </div> </div> </div> </body> </html>

    The first thing I would like to note is the use of English grammar, if you decide to use English words in your question, then it is worth checking the correctness of their spelling. The word weight means weight, and the word width is width.

    If you return to your question, then this result can be achieved with the help of Bootstrap classes and several styles.

    Here is my example

    In it, I used the stanadrt classes col-md-2 and col-md-10 in order to split to set the width of the menus and pictures to one sixth and 10/12 of the entire width of the window.

    The relative position was also used to raise the main unit by 20px. The width of this block is specified in percent, so if you need mobile devices, you can use media queries

    Markup

     <header class="row"></header> <div class="row"> <aside class='col-md-2 col-sm-2'> <ul> <li>home</li> <li>not home</li> <li>contact</li> </ul> </aside> <div class="hero col-md-10 col-sm-10"></div> </div> <div class="somestuff"> <div class="content"></div> <footer> <div class="container">My footer</div> </footer> </div>

    Styles

     header { background: #ffc0cb; height: 10vh; } aside { background-color: #dde4eb; background: filter-gradient(#dde4eb, #dde4eb, vertical); background: background-image(linear-gradient(top, #dde4eb 0%, #dde4eb 1%, #499bea 100%)); height: 20vh; color: #fff; } .hero { height: 20vh; background: url("https://unsplash.imgix.net/photo-1431730524508-b2f28f2b793a?fit=crop&fm=jpg&h=1400&q=75&w=1050") no-repeat center center; background-size: cover; } .somestuff { background: #cacaca; height: 70vh; position: relative; } .content { max-width: 800px; width: 90%; height: 400px; background: #fff; position: relative; top: -20px; margin: auto; }

    If I could answer your question, please mark this answer as correct.