[Phoryn]

#css #html #html5 #css3

Wykopki mam problem nad, którym siedzę cały dzień i już mam powoli dość... Otóż sytuacja wygląda tak, że próbuję zmodyfikować istniejący kod i oto miałem w tle headera obrazek a chce uzyskać wideo. Z tym, że ciągle nic nie wychodzi tka jak bym sobie tego życzył. A to wideo jest za duże a to z boku są szare bloki.... Wstawiam kod. Proszę o pomoc:

HTML:

Touché
======

Restaurant / Coffee / Pub

Discover Story 

CSS:

body, html {
 font-family: 'Raleway', sans-serif;
 text-rendering: optimizeLegibility !important;
 -webkit-font-smoothing: antialiased !important;
 color: #777;
 font-weight: 300;
 width: 100% !important;
 height: 100% !important;
}

#header {
 position: relative;
 overflow: hidden;

}

#video {
 position: fixed;
 top: 0;
 left: 0;
 min-width: 100%;
 min-height: 100%;
 z-index: -1;
}

.intro {
 display: table;
 width: 100%;
 padding: 0;
 background: url(../img/intro-bg.jpg) no-repeat center center; 
 background-color: #e5e5e5;

 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 }

[b.....e]

@Phoryn: ten kod css to tak na poważnie?

[Phoryn]

@beee: Umieściłem kod po swoich modyfikacjach może to dlatego jest nieczytelny. Może lepiej pokaże to w ten sposób:

body, html {
 font-family: 'Raleway', sans-serif;
 text-rendering: optimizeLegibility !important;
 -webkit-font-smoothing: antialiased !important;
 color: #777;
 font-weight: 300;
 width: 100% !important;
 height: 100% !important;
}
.intro {
 position: relative;
 display: table;
 width: 100%;
 padding: 0;
 /*background: url(../img/intro-bg.jpg) no-repeat center center; 
 background-color: #e5e5e5;*/

 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
}

[Phoryn]

@beee: Potrzebuję radę jak umieścić ten film w bloku header jako tło

[b.....e]

@Phoryn: zdecydowana większość typowych problemów jest opisana na necie, wystarczy wpisać w google zapytanie po angielsku, np. video in background html. Otrzymasz masę linków z różnymi rozwiązaniami i będziesz mógł skorzystać ze wskazówek.