Idemo urediti neka css pravila za uređivanje ZAGLAVLJA I PAGE CONTAINERA.
/* Header */
header {
height: 430px;
background-color: #cf0004;
background-image: url(../images/banner_1200.jpg);
background-repeat: no-repeat;
background-position: center bottom;
/* [disabled]background-size: cover; */
position: relative;
}
Za ovaj primjer odabrali smo banner slijedećih dimenzija 12000 x 430 px. Za potrebe manjih preglednika imamo pripremljene slijedeće bannere.
Budući da smo background-image postavili na širinu od 1200 px, svakim većim preglednikom dobijemo slijedeći problem kao na slici:
To ćemo riješiti postavljanjem slijedećeg koda za #page odmah ispod body taga.
body {
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
margin: 0px;
padding: 0px;
}
#page {
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 1200px;
}
/* Text */ …
