Фон не может позиционировать

Question

привет, ребята, я новичок в html и css Я хотел создать 4 фонов один сверху, один слева внизу и один справа ... но как-то тот, t показать, а другая хорошая работа Вы можете мне помочь?

HTML:

<div class="header"> 
    </div> 

    <div class="leftheader"> 
    </div> 

    <div class="rightheader"> 
    </div> 

    <div class="bottomheader"> 
    </div> 

CSS

body { 
    background-color: #efefef; 
    margin: 0px auto; 
    font-family: arial 

} 


.header{ 
    background: #cccccc; 
    background-position: top; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    border: 0px solid #000000; 
    width: auto; 
    height: 60px; 
} 

.leftheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: left; 
    border: 0px solid #000000; 
    width: 100; 
    height: 590; 
} 

.rightheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right 10px top 10px; 
    border: 1px solid #000000; 
    width: 100; 
    height: 590; 
} 

.bottomheader { 
    background: #cccccc; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: bottom; 
    border: 0px solid #000000; 
    width: auto; 
    height: 60px; 
} 

Answer 1

Ключ к получению этого к работе использует float: left и float: right на ваших .leftheader и .rightheader элементов. Затем вам нужно очистить ваши поплавки, положив clear: both на .bottomheader.

body { 
 
    background-color: #efefef; 
 
    margin: 0px auto; 
 
    font-family: arial 
 
} 
 
.header { 
 
    background: #cccccc; 
 
    background-position: top; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    border: 0px solid #000000; 
 
    width: auto; 
 
    height: 60px; 
 
} 
 
.leftheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: left; 
 
    border: 0px solid #000000; 
 
    width: 100px; 
 
    height: 590px; 
 
    float: left; 
 
} 
 
.rightheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: right 10px top 10px; 
 
    border: 1px solid #000000; 
 
    width: 100px; 
 
    height: 590px; 
 
    float: right; 
 
} 
 
.bottomheader { 
 
    background: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: bottom; 
 
    border: 0px solid #000000; 
 
    width: auto; 
 
    height: 60px; 
 
    clear: both; 
 
}

<div class="header">header</div> 
 
<div class="leftheader">leftheader</div> 
 
<div class="rightheader">rightheader</div> 
 
<div class="bottomheader">bottomheader</div>