Css, putin ajutor, va rog?

http://blog.dota2.com/
Deci in primul rand site-ul ala e target-ul meu sa zic asa. Ceva de genul vreau sa iasa si sa mai schimb unele lucruri.
Ce-am reusit sa fac pana acum:
- am reusit sa pun acea bara neagra sus dar as dori ca atunci cand scrollez pagina sa ramana pe loc gen.. intelegi voi;daca dau scroll la pagina sa nu dispara ( nu am idee cum sa fac asta, as fi recunoscator daca m-ati ajuta )
- am reusit sa impart pagina pe diferite parti sa le spun asa ( div-uri ) si am idee despre ce este vorba; trebuie sa impart pagina pagina pe "parti" si sa lucrez la fiecare. De exemplu bara aia de sus am facut-o intr-un div. Backgrund-ul va trebui sa-l fac in alt div. Chenarul ala din mijlocul paginii de sub poza in alt div si tot asa.

Si urmeaza problemele... *aici e aici* :
- dupa cum ziceam am reusit sa sa creez bara de sus si chenarul principal, dar cand incerc sa adaug un background in spate ... se duce tot. Bara aia de sus nu mai e la locul ei, chenarul ala se duce in sus de tot incat jumate se vede si jumate nu... o sa pun o poza sa intelegeti mai bine si codul pe care am reusit sa-l scriu pana acum.
- am creat doua div-uri: unul pentru bara de sus, unul pentru chenaru din mijloc si unu pentu background; in chenarul din background le-am introdus pe celelalte doua cam asa:

<div class="imagineadebackground">
<div class="baradesus"> </div>
<div class="chenaruldinmijloc">
testestestestestest
</div>
</div>

si css-ul:

.baradesus{
background: linear-gradient(black, #292939);
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 100%;
}
.chenaruldinmijloc{
background: gray;
position: absolute;
	top: 70%;
	bottom: 0;
	left: 0;
	right: 0;
margin: auto;
height: 800px;
width: 50%;
}
.imagineadebackground{
background-image: url();
background-repeat: no-repeat;
position: relative;
height: 100%;
width: 100%;
}

https://postimg.org/image/h499hq33d/ -------- creatia mea ( cam asa arata cand incerc sa adaug background-ul )
Nu sunt cine stie ce expert in HTML si CSS, sunt clasa a 12-a si fac numai c++ si baze de date, mai putin HTML si CSS.

Edited by g0dafk, 31 March 2017 - 19:48.

Site-ul ala e bazat pe wordpress. Tema e facuta de autorul site-ului. O copie a site-ul va fi tratata cu restrictii de catre motoarele de cautare.
PS: click dreapta pe pagina, view page source si ai codul paginii te inspiri de acolo.

E si asta o varianta, dar nu ma ajuta prea mult. As vrea mai mult sa inteleg, iar din tot ce e acolo nu inteleg mare lucru ( adica inteleg, dar am impresia ca se poate face si cu mai putin cod ). Nu judec codul site-ului ca fiind gresit, dar am nevoie de cineva care sa-mi dea niste explicatii, stiu si eu sa copiez, doar sunt clasa a 12-a, cum crezi c-am ajuns aici?

Edited by g0dafk, 31 March 2017 - 20:19.

https://www.w3schools.com