Webboard

Webboard > Webmastering > HTML/CSS/JavaScript > Zmiana tła na film
Pełna wersja: Zmiana tła na film
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

wisniakos

16.01.2016, 13:50
wersja skryptu MyBB: 1.8.3
adres forum: http://csfrag.pl/
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Jak zmienić tło na przedstronie na film np. prezentujący moją sieć serwerów?


index.php przedstrony
Kod:
<!DOCTYPE HTML>
<html lang="PL">
  <head>
    <meta charset="UTF8">
    <meta name="description" content="minecrafty">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="porn,xvideos,free porn, milf,teens,sex">
    <meta name="robots" content="index, follow">
    <meta name="author" content="senox">
    <title>CsFrag.pl - Przedstrona</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/hover.css" rel="stylesheet" media="all">
    <link href="css/hover-min.css" rel="stylesheet">
    <script src="js/modernizr.custom.js"></script>
    <script type="text/javascript" charset="iso-8859-2" src="js/date.js"></script>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro"/>
  </head>
 <body>
<div id="belkaup">
<div class="widthbelka">
<div class="belkatext"><span style="MyriadPro-Regular">WITAJ NA PRZEDSTRONIE</span> <b>CsFrag.pl</b> - Sieć serwerów Counter-Strike !!!</div>
</div>
</div>
<div id="szerokoscstr">
<a href="http://csfrag.pl/forum/"><div class="logo"></div></a>
<div id="bgogloszenie">
<div class="parafialnehead"><b>Najnowsze</b> ogłoszenie:</div>
<div class="parafialne">Forum CsFrag.pl wystartowało z wielkim przytupem! Na nowych użytkowników czeka masa konkursów z wieloma wartościowymi rzeczami do wygrania! Zapraszamy do odwiedzenia naszego forum i brania udziału w konkursach. <br><br> Pozdrawia <br> <b>Ekipa CsFrag.pl</b></div>
</div>
<a href="http://csfrag.pl/forum/"><div id="button1" class="button"><div class="menutext"> <b> FORUM</b></div></a></div>
<a href="index.html"><div id="button2" class="button"><div class="menutext"> <b> KUP VIPA</b></div></a></div>
<a href="http://csfrag.pl/forum/forumdisplay.php?fid=3"><div id="button3" class="button"><div class="menutext"> <b> KONKURSY</b></div></a></div>
<a href="http://danielli.mybans.eu/ban_list.php"><div id="button4" class="button"><div class="menutext"> <b> AMX BANS</b></div></a></div>
<a href="http://csfrag.pl/forumdisplay.php?fid=8"><div id="button5" class="button"><div class="menutext"> <b> WSTAW SSY</b></div></a></div>
<br><br>
<div id="partnerzybg">
<div class="partnerzytexthead"> <b> partnerzy </b> naszego forum! </div>
<div class="partnerzytext">chcesz by <b> twój banner </b> znalazł się tutaj? Skontaktuj się z administratorem poprzez <b> gg : <a href="gg:55721993">55721993</a></b></div>
<div id="banner1"><a href="http://csfrag.pl"><img src="http://csfrag.pl/images/frag.gif"></img></a></div>
<div id="banner2"><a href="http://csfrag.pl"><img src="http://csfrag.pl/images/frag.gif"></img></a></div>
</div>
</div>
<br><br><br><br>
<! ZAKAZ EDYTACJI , EDYCJA TEGO ELEMENTU WIĄŻE SIĘ ZE ZŁAMANIEM PRAW AUTORSKICH PRZYPISANYCH FORUM WEBMASTERKO-GRAFICZNEMU SPACECMS.EU ORAZ PONIESIENIEM KONSEKWENCJI PRAWNYCH Z TEGO TYTUŁU. >
<div id="stopka">
<div class="widthstopka">
<div class="stopkatext">Copyright 2015-2016 by <b> spacecms.eu</b>, wszelkie prawa zastrzeżone</div>
<div class="stopkaautorzy">Projekt graficzny : <b>kubaart.</b> [ <a href="http://spacecms.eu/index.php?/profile/188-kubaart/">SpaceCMS.eu</a> ] Wdrożenie : <b>spacecms.eu</b>  [<a href="http://spacecms.eu"> spacecms.eu </a> ]</div>
</div>
</div>
<! KONIEC ZAKAZU EDYTACJI >
</body>



css przedstrony

Kod:
body { 
background-image: url('../images/background.png'); 
width: 100% ; 
height: auto; 
background-repeat: no-repeat;
background-color: #1c1c1c; 
overflow: hidden;
margin: 0px auto;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial;
font-size: 12px;
color: #fff
}
#szerokoscstr {
margin: 0 auto;
width:1187px;
height: 800px;
}
/* Linki */
a:link    {color: #fff; background-color:transparent; text-decoration:none; transition:transform 2s, color 1s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);}
a:visited {color: #fff; background-color:transparent; text-decoration:none; transition:transform 2s, color 1s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);}
a:hover   {color: #fff;  background-color:transparent; text-decoration:none; transition:transform 2s, color 1s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);}
a:active  {color: #fff;  background-color:transparent; text-decoration:none; transition:transform 2s, color 1s; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);}

#belkaup {
background-image: url('../images/belkaup.png');
width: 100%;
line-height:48px;
height: 48px;
background-repeat: repeat;
}

.widthbelka {
margin: 0 auto;
width:1187px;
height:auto;
}

.belkatext {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial;
font-size: 13px;
line-height:52px;
color: #fff;
text-align: left;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
}

.logo {
background-image: url('../images/logotyp.png');
width: 600px;
height: 160px;
position: relative;
top: 95px;
float:left;
background-repeat: no-repeat;
}

#bgogloszenie {
background-image: url('../images/ogloszeniebg.png');
width: 475px;
height: 191px;
position: relative;
margin: 0px auto;
top: 50px;
float: right;
background-repeat: no-repeat;
} 

.parafialnehead {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial ;
font-size: 14px;
color: #fff;
text-align: left;
padding-top: 20px;
padding-left: 25px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
}

.parafialne {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial ;
font-size: 13px;
color: #fff;
text-align: left;
padding-top: 10px;
padding-left: 25px;
padding-right:25px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
} 

/*MENU by senoxik SpaceCMS.eu*/
#button1 {
position: absolute;
margin-top:300px;
margin-left:0px;
}

#button2 {
position: absolute;
float:left;
margin-top: 300px;
margin-left: 238px;
}

#button3 {
position: absolute;
margin-top: 300px;
margin-left: 476px;
}

#button4 {
position: absolute;
margin-top: 300px;
margin-left: 714px;
}

#button5 {
position: absolute;
margin-top: 300px;
margin-left: 952px;
}

.button {
background-image: url('../images/button.png');
width: 235px;
height: 56px;
background-repeat: no-repeat;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1s linear;}

.button:hover {
opacity: 0.75;
filter: alpha(opacity=75);
 -webkit-transition: opacity 1s linear;
}

.menutext {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial ;
font-size: 13px;
color: #fff;
text-align: center;
padding-top: 23px;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
}

/*Partnerzy*/
#partnerzybg {
background-image: url('../images/partnerzybg.png');
margin: 0px auto;
width: 1187px;
height: 190px;
background-repeat: no-repeat;
position: absolute;
margin-top: 400px;
margin-left: 0px;
}

.partnerzytexthead {
font-size: 14px;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial;
color: #fff;
padding-top: 25px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
text-transform: uppercase;
text-align: center;
} 

.partnerzytext {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial ;
font-size: 12px;
color: #fff;
padding-top: 5px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
text-transform: uppercase;
text-align: center;
} 

#banner1 {
position: absolute;
margin-top: 25px;
margin-left: 75px;
}

#banner2 {
position: absolute;
float:right;
margin-top: 25px;
margin-left: 590px;
}

#stopka {
background-image: url('../images/stopkabg.png');
position:absolute;
bottom:0px;
width: 100%;
height: 50px;
background-repeat: repeat;
}

#stopka .widthstopka {
margin: 0 auto;
width:1187px;
height: 50px;
}
.stopkatext {
font-size: 13px;
color: #fff;
float:left;
height:50px;
line-height:55px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
text-transform: uppercase;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial;
text-align: left;
}
.stopkaautorzy {
font-size: 13px;
color: #fff;
float:right;
height:50px;
line-height:55px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.21);
text-transform: uppercase;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', MyriadPro-Bold, 'Myriad Pro Bold', Arial;
text-align: left;
}

Divir

16.01.2016, 19:48
html:
Kod:
<video autoplay loop poster="sciazka_do_okladki">
   <source src="sciezka_do_nagrania.mp4" type="video/mp4">
</video>

css: 
Kod:
video{display:block}
video{
 position:fixed;
 top:50%;
 left:50%;
 min-width:100%;
 min-height:100%;
 width:auto;
 height:auto;
 z-index:-100;
 -webkit-transform:translateX(-50%) translateY(-50%);
 transform:translateX(-50%) translateY(-50%);
 background:url(codingbg.jpg) no-repeat;
 background-size:cover;
 overflow:hidden
}

W sumie nie jest to już nic związanego z MyBB jeśli chcesz to dać na podstronie...

wisniakos

18.01.2016, 17:34
(16.01.2016, 19:48)Divir napisał(a): [ -> ]html:

W sumie nie jest to już nic związanego z MyBB jeśli chcesz to dać na podstronie...

W sumie to masz racje ale gdzie miałem zapytać jak nie tu? A i + leci
Webboard > Webmastering > HTML/CSS/JavaScript > Zmiana tła na film