Autor Zpráva
jozo1606
Profil
Ahojte, vedel by mi niekto poradiť ako spraviť header

Panoramatická fotka, ked pridem myškou naň, tak sa bude posuvať podľa toho kde mam prave myšku niečo na tento štyl ...

Myslim toto : www.bardejov.sk/mesto/

Vopred ďakujem
popripade niečo pre wordpress hmm ?
MyShare
Profil
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://www.bardejov.sk/mesto/templates/bardejov/js/jquery.min.js"></script>
</head>
<body>
<div class="wrap header">
<div id="port">
      <!-- Seven image layers, each layer slightly bigger than the one behind, making 'closer' layers move faster. -->
      <img class="parallax-layer" src="http://www.bardejov.sk/mesto/templates/bardejov/images/paralax/obloha.jpg" alt="" style="width:1960px; height:280px;"/>
      <img class="parallax-layer" src="http://www.bardejov.sk/mesto/templates/bardejov/images/paralax/logo.png" alt="" style="width:1940px; height:280px;"/>
      <img class="parallax-layer" src="http://www.bardejov.sk/mesto/templates/bardejov/images/paralax/mesto.png" alt="mesto bardejov" style="width:1920px; height:280px;"/>
    </div>
</div>
 <script src="http://www.bardejov.sk/mesto/templates/bardejov/js/jquery.parallax.min.js" type="text/javascript"></script>
 <script src="http://www.bardejov.sk/mesto/templates/bardejov/js/vticker.js" type="text/javascript"></script>
 <script src="http://www.bardejov.sk/mesto/templates/bardejov/js/bardejov.js" type="text/javascript"></script>
</body>
</html>

CSS
* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
}
.wrap {
    float: left;
    width: 100%;
}
.header {
    /*    background: url('../images/bg_header.jpg') center top no-repeat; */
    height: 280px;
}
#header {
    background: url('http://www.bardejov.sk/mesto/templates/bardejov/images/bg_topper.png') center top no-repeat;
    width: 960px; /*    height: 305px; */;
    height: 115px;
    margin: 0 auto;
    position: relative;
}

#port {
    background: none repeat scroll 0 0 #2F3134;
    height: 280px;
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.parallax-viewport {
    position: relative; /* relative, absolute, fixed */;
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

Samozrejme len ako ukážka kódu :)
Chamurappi
Profil
Reaguji na joza1606:
Řekl bych, že na to stačí jeden řádek. Pokud má být hlavička přes celou šířku stránky:
<div onmousemove="this.style.backgroundPosition = event.clientX / this.offsetWidth * 100 + '% 0';">
Obrázek bude na pozadí tohoto <div>u…
jozo1606
Profil
a neviete mi poradiť ako to vopchat do wordpressu ?

chapem upraviť header.php, style.css no čo tam zadať z toho čo ste napisali ťažko povedať :/

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: