stacking of several html5 as "div backgrounds" videos sent behind in Z-index with content before

The best example I can give you is www.greygoose.com.

The same way they have their articles on their stacked homepage, pictures sent on the z index with content in the face, I want to achieve the same with html5 video instead of a fixed image several 'objects '. I know how to include html5 videos and could easily stack on top of each other, but his envoys back and writes the content before and now have coordinated regardless of the width of the window (width = 100%) or zoom in the browser of the user (if its more or less than 100%). An example of 4 would be perfect and even better if it could include the "floating" footer navigation (which of course has a fixed = position; bottom = 0 and left = 0 of a positive Z-index), but I'm also interested him growing as it does when it reaches the bottom of the page.

Thanks for the ideas, pointers, helps and of course answers

Here you will see a number of tutorials that can help you http://devfloat.net/jquery-parallax-scrolling-tutorials/

Another example brought pure CSS Parallax demo by Keith Clark with the tutorial here Pure CSS Parallax websites by Keith Clark

Otherwise, Google the topic.

Tags: Dreamweaver

Similar Questions

  • Center the div in parent div Background Image and not the whole page

    I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.

    I did a video showing the problem here, because I'm not sure I use the right words to describe the problem


    Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube

    In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.

    Still another problem as can be seen in the video but not prime, since it still works live, is:

    In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.

    I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.

    Any other help would be greatly appreciated.

    source code

    <! - head - >

    < head >

    < title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >

    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

    <! - CSS - >

    < link href = "css/reset.css" rel = "stylesheet" type = "text/css" / > "

    < link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "

    < link href = "css/nav.css" rel = "stylesheet" type = "text/css" / > "

    < style type = "text/css" >

    Judging {}

    background-image: url(images/transparent%20%202.png);

    }

    {b .diversion

    background-image: url(images/transparent%20white.png);

    }

    .diversion a {}

    background-attachment: fixed;

    background-image: url(images/diversion%202.jpg);

    background-repeat: no-repeat;

    background-position: Center;

    }

    {b .diversion

    }

    .f {}

    }

    {.yeay}

    background-image: url(images/bluebg.jpg);

    background-repeat: no-repeat;

    }

    . GG {}

    background-image: url(images/bluebg.jpg);

    background-repeat: no-repeat;

    background-position: right top;

    }

    {.ggf}

    background-image: url(images/bluebg.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    overflow: hidden;

    Padding: 50px 50px 0 0;

    }

    {.dd

    background-attachment: fixed;

    background-image: url(images/diversion%202.jpg);

    background-repeat: no-repeat;

    }

    . TTT {}

    background-attachment: fixed;

    background-image: url(images/diversion%202.jpg);

    background-repeat: no-repeat;

    }

    {.testtt}

    background-attachment: scroll;

    background-image: url(images/Diversion%20640.jpg);

    background-repeat: no-repeat;

    }

    {u}

    background-attachment: fixed;

    background-image: url(images/diversiony.jpg);

    background-repeat: no-repeat;

    background-position: Center;

    }

    .long {}

    background-attachment: fixed;

    background-image: url(images/transparent%20long.png);

    }

    {.yty}

    background-attachment: fixed;

    background-image: url(images/transparent%20long.png);

    background-repeat: repeat-y;

    }

    {.gggd}

    background-attachment: fixed;

    background-image: url(images/transparent%20long.png);

    background-repeat: repeat-y;

    background-position: Center;

    }

    {.diversion1}

    background-attachment: fixed;

    background-image: url(images/Diversion%20640.jpg);

    background-repeat: no-repeat;

    background-position: center;

    }

    .TT {}

    background-image: url(images/transpare%20long.png);

    }

    < / style >

    <!-[if IE 6] >

    < link href = "css/ie.css" rel = "stylesheet" type = "text/css" / > "

    <! [endif]-->

    <!-//CSS-->

    "< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >

    < script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >

    < script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >

    "< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >

    < script type = "text/javascript" >

    CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");

    < /script >

    <! - Javascript - >

    < / head >

    <!-/ /-> head

    <! - body - >

    < body >

    <! - top Bar - >

    < div id = "top_bar" >

    <! - Nav container - >

    < div id = "nav_container" >

    <! - logo - >

    < div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "

    <!--end Logo-->

    <! - Nav - >

    < ul id = "nav" >

    < li > < a HREF = "index.html" > home < /a > < /li >

    < li > < a HREF = "music.html" > music < /a > ' "

    < ul >

    < li > < a HREF = "about.html" > dj sets < /a > < /li > ""

    < li > < a HREF = "about.html" > < /a > artists ' "

    < ul >

    < li > < a HREF = "about.html" > ttu < /a > < /li > ""

    < li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""

    < li > < a HREF = "about.html" > evairta < /a > < /li >

    < li > < a HREF = "about.html" > old future < /a > < /li > ""

    < /ul >

    < /li >

    < /ul >

    < /li >

    < li > < a class = 'on' HREF = "his design.html" > < /a > sound design

    < ul >

    < li > < a HREF = "his banks.html" > < /a > sound banks

    < ul >

    < li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >

    < li > < a HREF = "diversion.html" > derivation < /a > < /li > ""

    < /ul >

    < /li >

    < li > < a HREF = "drum loops.html" > drum loops < /a > < /li >

    < li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >

    < /ul >

    < /li >

    < li > < a HREF = "blog.html" > blog < /a >

    < ul >

    < li > < a HREF = "blog.html" > news < /a > < /li > "

    < li > < a HREF = "blog.html" > tutorials < /a > < /li > ""

    < li > < a HREF = "blog.html" > videos < /a > < /li > ""

    < /ul >

    < /li >

    < li > < a HREF = "booking.html" > book < /a > < /li >

    < class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >

    < /ul >

    <!--end Nav-->

    < / div >

    <!--end Nav container-->

    < / div >

    <!--end Top Bar-->

    <! - albums content Wrapper - >

    < div id = "topcontent_wrap" >

    <! - content at the top of the page - > 0

    < div id = "topcontent" >

    <! - main content - >

    < div id = "leftcontent" >

    Sound < h1 > - serene Horizon Bank < / h1 >

    < h2 class = "nodivider" > derivation < / h2 >

    < a href = "his banks.html" > < / a >

    < div > < / div >

    < div >

    < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

    < p > < / p >

    < div class = "diversion1" >

    < p > < / p >

    < p > < / p >

    < div class = "tt" >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p >

    " < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .

    < /p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < / div >

    < p > < / p >

    < / div > < / div >

    < p > < / p >

    < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.  < /p >

    "< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < div class = "u" >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < / div >

    < p > < / p >

    < div class = "transparent" >

    < p > < / p >

    < p > < / p >

    < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

    < p > < / p >

    < p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "

    < p > < / p >

    " < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < / div >

    < p > < / p >

    < div class = "gggd" >

    class "gggd" goes here < /p > < p > content

    < p > < / p >

    < p > < / p >

    < p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / p > "

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < p > < / p >

    < / div >

    < p > < / p >

    < p > < / p >

    <! - project - > <! - end project - >

    < / div >

    <! - end main content - >

    <!--> sidebar

    < div id = "sidebar" >

    < h3 class = "sidebartitle" > sound banks < / h3 >

    < ul >

    < li > < a href = "his banks.html" > Dune 2 < /a > < /li >

    < li > < a class = "sidebaron" href = "#" > derivation < /a > < /li >

    < li > < a href = "hive.html" > < /a > < /li > the hive

    < li > < a href = "#" > Spire < /a > < /li >

    < li > < a href = "#" > Electra 2 < /a > < /li >

    < li > < a href = "#" > serum < /a > < /li >

    < li > < a href = "#" > Sylenth < /a > < /li >

    < li > < a href = "#" > Omnisphere 2 < /a > < /li >

    < li > < a href = "#" > lush 101 < /a > < /li >

    < /ul >

    < / div >

    <! - end box - >

    < / div >

    <! - high end content - >

    < / div >

    <! - end albums content Wrap - >

    <! - down content Wrapper - >

    < div id = "bottomcontent_wrap" >

    <! - low content - >

    < div id = "bottomcontent" >

    < div class = "left" >

    < h3 class = "icon1" > services < / h3 >

    < ul >

    Versions Audio concerts, Dj Sets, < li > < /li >

    < li > sound design for Music Production < /li >

    Label Audio < li > - accepting demos < /li >

    < /ul >

    < / div >

    < div class = "middle" >

    < h3 class = "icon2" > Touch The Universe < / h3 >

    < class p = "footerp" > owned and operated by Timothy ivory. Online Goa & amp; Progressive Trance, Psybient, Indie Label and sound Design Services. Available for booking within the USA. Demo accepted. < /p >

    < / div >

    < div class = "right" >

    < h3 class = "icon3" > Blog < / h3 >

    < h1 class = "footerblog" > < a href = "#" > key the universe direct is < /a > < / h1 >

    < h1 class = "footerblog" > 02.02.16 < / h1 >

    < class p = "footerp" > launch of the location and label with the first version of operations for embezzlement. < /p >

    < / div >

    <!--> footer

    < div id = "footer" >

    < div id = 'copyright' >

    < img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "

    < class p = 'copy' > © AD 2016 |  "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >

    < / div >

    < div class = "source" >

    " < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .

    < / div >

    < / div >

    <! - end footer - >

    < / div >

    <! - deep content - >

    < / div >

    <! - deep content Wrapper - >

    " < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .

    <! - end body - >

    < / html >

    css stylesheet

    {body

    background-color: #191919;

    do-size: 12px;

    do-family: Arial;

    line-height: 23px;

    color: #fff;

    }

    IMG,

    #logo,

    #smallphone,

    #bigphone,

    touch,

    a,

    H3,

    #slidernav li,

    #computer,

    #footer,

    #footer img,

    .smalllogo,

    .learnmore,

    {#submit}

    behavior: url(javascript/iepngfix.htc)

    }

    /* ---------- Hack ---------- */

    .stripNavL, {.stripNavR}

    display: none;

    }

    .stripNav a {}

    text-indent:-9999px;

    }

    {#stripNav0}

    Width: 200px;

    }

    {.stripNav}

    Width: 200px! important;

    }

    .stripNav ul li {}

    margin-left: 10px;

    }

    .stripNav ul {}

    float: right! important;

    }

    {.clearfix}

    Display: inline-block; }

    . Clearfix: after {}

    "content: » ;

    Display: block;

    height: 0;

    Clear: both;

    visibility: hidden; }

    / * Hide IE Mac * /.

    . Clearfix {display: block ;}}

    / * End hide IE Mac * /.

    /* ---------- Typo ---------- */

    {small

    display: block;

    margin: 10px 10px 0 0;

    color: #6fcad7;

    text-transform: uppercase;

    make-weight: bold;

    }

    {small .entry-block

    make-weight: normal;

    text-transform: none;

    }

    {p}

    color: #FFFFFF;

    }

    a, {.link

    color: #6fcad7;

    text-decoration: none;

    }

    H1 {}

    text-transform: uppercase;

    font size: 16.5px;

    color: #FFFFFF;

    }

    H2 {}

    text-transform: uppercase;

    font size: 36.5px;

    color: #6fcad7;

    padding-bottom: 15px;

    Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;

    }

    {.nodivider}

    background-image: none;

    }

    H3 {}

    text-transform: uppercase;

    font size: 16.5px;

    height: 30px;

    color: #6fcad7;

    padding: 5px 0px 0px 35px;

    Background: url (.. / images/icon11.png) left no-repeat;

    }

    H4 {}

    font size: 24 PX.

    color: #6fcad7;

    display: block;

    margin: 20px 0 0 0;

    }

    {.description_p}

    color: #ffffff;

    Padding: 15px 0px;

    Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;

    }

    .Icon1, .icon2, .icon3 {}

    color: #ffffff;

    }

    {.icon1}

    Background: url (.. / images/icon9.png) left no-repeat;

    }

    {.icon2}

    Background: url (.. / images/icon11.png) left no-repeat;

    }

    {.icon3}

    Background: url (.. / images/icon10.png) left no-repeat;

    }

    .footerblog a {}

    color: #FFFFFF;

    text-decoration: none;

    margin: 20px 15px 0px 0px;

    }

    .footerblog a: hover {}

    color: #6fcad7;

    }

    {.footerblog}

    margin-bottom: 5px;

    font size: 15px;

    }

    #footer p {}

    color: #a4a4a4;

    do-size: 10px;

    }

    /* ---------- Logo ---------- */

    #logo {}

    float: left;

    Padding: 12px 0px 0px 10px;

    }

    /* ---------- Slider ---------- */

    {#topcontent_wrap}

    background-color: #0 d 7483;

    overflow: hidden;

    }

    {#topcontent}

    Width: 940px;

    margin: 0 auto 0 auto;

    Background: url (.. / images/bluebg.jpg) top left no-repeat;

    position: relative;

    overflow: hidden;

    Padding: 70px 50px 0 0;

    color: #0FF ;}

    {#info}

    float: right;

    Width: 550px;

    Padding: 0px 0px 0px 35px;

    }

    {#infoleft}

    float: left;

    Width: 550px;

    Padding: 0px 0px 0px 35px;

    }

    {#infoleftsmall}

    float: left;

    Width: 300px;

    Padding: 0px 0px 0px 35px;

    }

    . Video {}

    float: right;

    top of the margin: 45px;

    }

    . Video a {}

    text-decoration: none;

    color: #FFFFFF;

    }

    . Video: hover {}

    color: #6fcad7;

    }

    {.screenshotsfeatures}

    margin: 20px 10px 0px 0px;

    overflow: hidden;

    }

    {.screenshots}

    Width: 300px;

    float: left;

    }

    .the {}

    left margin: 20px;

    float: left;

    }

    .screenshots li {}

    display: block;

    Width: 71px;

    height: 57px;

    Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;

    float: left;

    Padding: 7px;

    margin: 0px 10px 10px 0px;

    }

    . List {}

    Background: url (.. /images/features-BG.jpg top) left no-repeat;

    Width: 196px;

    height: 96px;

    top of the margin: 9px;

    Padding: 0px 0px 33px 11px;

    }

    . List li {}

    color: #96d7e0;

    list-style: circle;

    low-margin: 7px;

    }

    button {}

    float: left;

    margin: 10px 0 0 0;

    }

    {.learnmore}

    Background: url (.. / images/learnmorebtn.png) top left no-repeat;

    Width: 99px;

    height: 30px;

    display: block;

    color: #6fcad7;

    text-transform: uppercase;

    do-size: 11px;

    text-decoration: none;

    make-weight: bold;

    line-height: 30px;

    text-align: center;

    }

    {a.learnmore:hover}

    Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;

    }

    {#slidernav}

    position: absolute;

    margin-bottom: 30px;

    right: 10px;

    bottom: 60px banner;

    }

    #slidernav li {}

    Background: url (.. /images/dot-OFF.png top) left no-repeat;

    Width: 12px;

    height: 11px;

    margin-left: 10px;

    float: left;

    }

    #slidernav ul {}

    margin-top: 10px;

    }

    #slidernav li.doton {}

    Background: url (.. /images/dot-on.png top) left no-repeat;

    Width: 12px;

    height: 11px;

    margin-left: 10px;

    float: left;

    }

    #slidernav li a {}

    display: block;

    Width: 12px;

    height: 11px;

    }

    #slidernav li a.the {}

    Background: url (.. /images/dot-on.png top) left no-repeat;

    Width: 12px;

    height: 11px;

    display: block;

    }

    #slidernav li a span {}

    display: none;

    }

    / * - iPhone - computer-* /.

    {#iphone}

    position: relative;

    Padding: 110px, 70px 0px 0px;

    Width: 345px;

    z-index: 1;

    float: left;

    margin:-50px 0 - 30px 0;

    }

    {#smallphone}

    Background: url (.. / images/smallphone.png);

    Width: 159px;

    height: 292px;

    Padding: 0px 0px 22px 57px;

    }

    {#bigphone}

    Background: url (.. / images/bigphone.png);

    Width: 211px;

    height: 378px;

    Padding: 0px 0px 28px 73px;

    position: absolute;

    top: 45px;

    right: 0;

    z index: 9999;

    }

    {#computer}

    Background: url (.. / images/computer.png);

    Width: 319px;

    height: 311px;

    float: right;

    top of the margin: 45px;

    Padding: 15px 0px 0px 25px;

    }

    / * - On the content of the left Page-* /.

    {#leftcontent}

    Width: 680px;

    overflow: hidden;

    float: left;

    }

    {.imgfloat}

    float: left;

    margin: 15px 0px 20px 0px;

    }

    #sidebar {}

    float: left;

    Width: 190px;

    padding-left: 35px;.

    margin: 10px 0px 0px 725px;

    Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;

    position: fixed;

    }

    {.sidebartitle}

    Background: none;

    padding: 0px;

    }

    #sidebar ul {}

    margin: 10px 20px 0 0;

    Width: 190px;

    overflow: hidden;

    }

    #sidebar li {}

    margin-bottom: 10px;

    }

    #sidebar li a {}

    text-decoration: none;

    color: #bababa;

    font size: 16.5px;

    }

    #sidebar li a: hover {}

    color: #ffffff;

    }

    {.sidebaron}

    color: #ffffff! important;

    }

    #sidebar ul #social {}

    list-style: none;

    overflow: hidden;

    margin: 0-0 15px 0;

    Padding: 15px 0 0 0;

    Width: 188px;

    }

    #sidebar ul li {} #social

    margin-bottom: 0px;

    margin-top:-5px;

    overflow: hidden;

    float: left;

    }

    #sidebar ul a {} #social

    Width: 32px;

    padding: 0 15px 15px 0;

    overflow: hidden;

    display: block;

    }

    . Clear {}

    Clear: both;

    }

    purchase online .slider {}

    height: 449px;

    }

    / * - Down content-* /.

    {#bottomcontent_wrap}

    Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;

    Padding: 9px 0px 0px 0px;

    }

    {#bottomcontent}

    Width: 940px;

    margin: 0 auto;

    Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;

    overflow: hidden;

    padding-top: 30px;

    }

    .the .middle, {.right

    float: left;

    Width: 250px;

    }

    .the {}

    padding-right: 20px;

    Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;

    }

    .the ul {}

    margin: 5px 0px 0px 15px;

    }

    . Li {}

    color: #ffffff;

    list-style: circle;

    low-margin: 7px;

    }

    {.middle}

    padding: 0px 55px;

    }

    . Right {}

    float: right;

    padding-left: 55px;

    Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;

    }

    /* ---------- Contact ---------- */

    #container ul li.success

    {

    color: #ffffff;

    }

    #container ul

    {

    text-align: left;

    color: #6fcad7;

    top of the margin: 15px;

    }

    . TextField {}

    border: 1px solid #aaa;

    Background: #fff;

    padding: 5px;

    do-family: Arial;

    do-size: 12px;

    }

    {#submit}

    margin: 10px 0 0 0;

    Background: url (.. / images/learnmorebtn.png) top left no-repeat;

    Width: 99px;

    height: 30px;

    display: block;

    color: #6fcad7;

    text-transform: uppercase;

    do-size: 11px;

    text-decoration: none;

    make-weight: bold;

    line-height: 30px;

    border: 0;

    cursor: pointer;

    }

    #submit: hover {}

    Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;

    }

    . Entry-block {}

    margin: 20px 0 0 0;

    padding: 0 0 20px 0;

    Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);

    overflow: hidden;

    }

    . Thumb img {}

    border: 3px solid #cfcfcf;

    }

    purchase online .slider {}

    height: 445px;

    overflow: hidden;

    }

    /* ---------- Footer ---------- */

    #footer a {}

    text-decoration: underline;

    color: #CCCCCC;

    }

    #footer {}

    Background: url (.. / images/footerbg.png) top left no-repeat;

    Width: 938px;

    height: 75px;

    float: left;

    margin: 30px 0px;

    padding: 20px 15px;

    }

    #copyright {}

    float: left;

    }

    . Copy {}

    margin left: 55px;

    }

    {.smalllogo}

    padding-top: 5px;

    float: left;

    }

    .source {}

    text-transform: uppercase;

    padding-right: 55px;

    float: right;

    }

    {# block-project}

    margin: 30px 0 0 0;

    overflow: hidden;

    }

    #thumb-{grand

    Width: 374px;

    height: 365px;

    border: 3px solid #cfcfcf;

    float: left;

    margin: 20px 0 0 0;

    }

    {#right-block}

    float: right;

    Width: auto;

    overflow: hidden;

    Width: 340px;

    right margin:-60px banner;

    }

    {#thumb - UL small

    list-style: none;

    overflow: hidden;

    Width: 100%;

    }

    UL #thumb - small li {}

    float: left;

    margin: 20px 0 0 0;

    }

    #thumb - small UL a {}

    float: left;

    height: 97px;

    Width: 122px;

    border: 3px solid #cfcfcf;

    display: block;

    }

    UL #details {}

    list-style: none;

    Width: 100%;

    overflow: hidden;

    top of the margin: 20px;

    }

    UL li {} #details

    Background: url (.. / images/bullet.gif) no repeat 1px 0;

    height: 36px;

    padding: 0 0 0 30px;

    }

    / * Cursor * /.

    .stripViewer .panelContainer .panel ul {}

    text-align: left;

    }

    / * These 2 lines specify style applied during the loading of cursor * /.

    . CSW {width: 100%; height: auto; overflow: hidden ;}}

    . CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}

    .stripViewer {/ * this is the viewport * /}

    position: relative;

    overflow: hidden;

    / * border: 5px solid #000; / * This is the border. must have the same value for the links * /.

    margin: auto;

    Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.

    height: auto;

    Clear: both;

    / * background: #fff; * /

    }

    .stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.

    position: relative;

    left: 0; top: 0;

    Width: 100%;

    list-style-type: none;

    / * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */

    }

    .stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}

    float: left;

    height: 100%;

    position: relative;

    Width: 940px; / * As specified in .stripViewer above * /.

    }

    .stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}

    padding: 0px 0 0 0;

    }

    .stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}

    margin: auto;

    position: absolute;

    z index: 9999;

    bottom: 85px;

    right: 0px;

    }

    .stripNav ul {/ * generated automatically links * /}

    list-style: none;

    }

    .stripNav ul li {}

    float: left;

    right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.

    height: 11px;

    Width: 12px;

    }

    .stripNav a {/ * the nav links * /}

    font size: 1px;

    text-align: center;

    Background: url (.. /images/dot-OFF.png) no-repeat;

    color: #fff;

    text-decoration: none;

    display: block;

    Width: 12px;

    height: 11px;

    }

    .stripNav Li a: hover {}

    Background: url (.. /images/dot-on.png) no-repeat;

    }

    .stripNav li a.the {}

    Background: url (.. /images/dot-on.png) no-repeat;

    color: #fff;

    overflow: hidden;

    Width: 12px;

    height: 11px;

    }

    .stripNavL, .stripNavR {/ * the arrows left and right * /}

    position: absolute;

    top: 230px;

    text-indent:-9000em;

    }

    .stripNavL a, .stripNavR a {}

    display: block;

    height: 40px;

    Width: 40px;

    }

    {.stripNavL}

    left: 0;

    }

    {.stripNavR}

    right: 0;

    }

    I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.

    position: 200px;

  • (Full) reagent background video

    Hello!

    I have a question is there any widget? allows to create effects such as here: BLOCK HARVEST | The filmmakers creative and videos of Paris and Berlin

    I mean the background video is vimeo/youtube link and its SENSITIVE help thx!

    Hello

    Yes, you can do this by using the suite of widgets.

    https://creative.Adobe.com/addons/products/2726#.U_uyHvmSx8E

    http://www.Muse-themes.com/blogs/News/11849413-video-backgrounds-in-Adobe-Muse-new-Widget

    Concerning

    Vivek

  • Best way to zoom/pan images on top of background video

    Situation

    Hello world

    I want to be able to have a background video (in this case fullscreen snowflakes) and an image slide show more than 75% of the video window.

    The slideshow would use zoom/pan knobs to control to create a ken burns effect.

    Complication

    Using animation keyframes scale and the movement is almost impossible to have the window stay in the same place and the image circulate inside it.

    So, I need to find a better way.

    Options

    One thing, I thought to do would be to somehow drill a hole in the background video and make transparent, and then pan and zoom of the image below.

    I think it would be kind of an elegant way to do it, but I do not see how to punch that hole.

    Questions

    1. am I on the right track or I'm matter it is more complicated it must be because I missed a few magic function in CS6?

    2. If I am on the right track, what are the steps to make the hole and fill with transparency?

    Thanks heaps.

    Ric


    There are ways to drill this hole, but it shouldn't.

    Just put the video that you want to appear in the hole on a separate strain. Let's call him 'Pan '. Then pan and zoom on stills like Ken Burns autour. Then, he just go back to the main sequence, call the 'Hand', with snowflakes and enter the "Pan" sequence in the project as if it was a clip. Drop it on the timeline on a track above the snowflakes, and then use the scale setting in the effect of movement to scale down and the position parameters to put it anywhere you want.

  • incongruous div background image?

    Here is the link to my test page:

    http://nandigital.com/test/about.html

    http://nandigital.com/test/include/style.CSS (I also comment on what makes every part of the css)

    I'm currently building a website from scratch, which consist of a difficulty of background image and the div background images 2 sit in the Middle (as html does not allow me to add more background in the body...).

    It has been tested last version of IE, firefox and chomre and on the different, all screen resolution correctly rendered.

    But as soon as I try to resize the window jumping of clutter and not solitary repetitive background work...

    12-04-2012 14-41-59.jpg

    Advice please help and thanks in advance. =)

    It seems that you are doing it correctly. The new

    to completely wrap the "outerContainer' (see below).

    Remove the bottom before the closing tag you don't need.

    Then, apply the repeating background:

    {#pageWrapper}

    Background: url (.. /images/Red-background.png);

    background-repeat: repeat-x;

    background-position: 100px 0; / * Use background-position to place the image to be * /.

    }

  • Age of Empires II - "can't initialize graphics system. Make sure that your video card and driver are compatible with DirectDraw.

    Hello

    I have a problem of Age of Empires 2 running on my new computer. Keeps displaying the following error message: "cannot initialize the graphics system. Make sure that your video card and driver are compatible with DirectDraw. "Someone at - it solutions to this? I have already visited many forums and trying different solutions; None of them helped.

    Tried solutions: change the compatibility and as an administrator, switching to 16-bit color, turn off my graphics card, execution of the extension "nostartup" of the game, looking for old patches from Microsoft (which most are now unavailable due to the game being so old). I KNOW that others have been able to get this game to work on the Windows 7 operating system, but with a few other quirks and I KNOW my video card and driver are more than capable of handling this game. Any suggestions?

    System Specs:

    System manufacturer/model number Dell/Studio 540
    Operating system windows 7 home premium 32 bit
    6 GB of memory
    Graphics card ATI Radeon HD 4350
    Monitor (s) displays Reference Dell ST2410

    Thanks in advance,

    EP

    I had the above problem with AOEII:Age of the Kings. My brief spec is Windows 7 Ultimate edition (SP1) and a card nVidia 8600 GT. I did the following (make sure you reboot after each installation):

    Make sure that you are running the latest patch of AOEII:AOK (2. 0 a):

    http://www.Microsoft.com/download/en/details.aspx?ID=35

    Download and install the latest version of DirectX:

    http://www.Microsoft.com/download/en/details.aspx?ID=5264

    Download and install the latest nVidia Driver suite. I left the autodetect my card software and reset all my default settings. I also installed the full software suite:

    http://www.nvidia.com/download/index.aspx?lang=en-us

    Finally, right click on the shortcut of AOE and click Properties. Click on the Compatibility tab and select the following:

    -Run this program in compatibility mode - choose Windows XP Service Pack 2 (!) NOT 3!)
    -Disable visual themes
    -Disable the Composition of the Bureau
    -Run this program as an administrator

    One of the above options maybe work on its own, but that's what I had to do to make it work and I tested it after each step.

    Good luck!

  • Age of Empires 2: Age of Kings does not work on Windows 7. The error is: could not initialize graphics system. Make sure that your video card and driver are compatible with DirectDraw.

    I can't get my Age of Empires 2: Age of Kings drive on my computer.

    It gives me the error message: could not initialize graphics system. Make sure that your video card and driver are compatible with DirectDraw.

    What exactly is DirectDraw. and how can I make my video card and the driver compatible to it. I already tried to uninstall and reinstall the drive.

    Help, please!

    What kind of graphics card you have and you have the latest DirectX and video card drivers? If this isn't the case, update them.

  • rise of Nations pc game United gives an error: "could not initialize services make sure that your video card and drivers are compatible with the game.

    Hi, I recently installed rise of nations pc game but does not work because it says "could not initialize services make sure that your video card and drivers are compatible with the game. What should I do, how can I fix this to get the game to work.

    Hello

     
    1. What is the operating system installed on your computer?
    2. What is the brand and model of your computer?
     
    I suggest you to follow the links and check if it helps.
     
     
  • I - Phone video sent to me to my grandchildern, are on the side. I would like to 'spin' as I am able to do with images

    I - Phone video sent to me to my grandchildern, are on the side. I want to 'spin' as I am able to do with images. I can't find any opportunity to 'change' on the videos. Does anyone have a solution? Thank you

    Hi SandyTurkington,

    ·         What version of Windows is installed on your computer?

    ·         What application you're using to play the video file?

    ·         What is the file format of the video file?

    You have this option to rotate a video in Windows Live Movie Maker. If you have not installed Windows Live Movie Maker, you can follow the link below and install Movie Maker:

    http://windowslive.com/desktop/MovieMaker

    Once you download and install Windows Live Movie Maker, you can follow the steps below to rotate and save the video:

    You can turn video clips in Windows Movie Maker by following these steps:

    a. import the video clip in Windows Movie Maker.

    b. drag the imported video clip and drop it on the timeline.

    c. on the Tools menu, click Video Effects.

    d. to rotate the clip to the right, drag the effect video rotation 90 and drop it on the movie in the timeline.

    -or-

    To rotate the video clip on the left, drag the video effect rotate 270 and drop it on the movie in the timeline.

    e. on the file menu, click on the video file and follow the instructions of the wizard movie recording.

    Hope this information helps.

  • Any REFLEX Cannon is 29 min video stop and don't work with cards sdxc fornat Exfat No 4 GB

    Any REFLEX Cannon is 29 min video stop and don't work with cards sdxc fornat Exfat no limit 4 GB?

    For the VIDEO?

    Thank you

    Almost all of the Canon 'Vixia' line of cams are less than 1 k $. The Vixia HF G30 $1150 and it is the only model over $1 k.  Here are all the models to consumer prices.  (X XAnn, XFnnn, & XCnn series is top of the line, and of course the EOS film bodies are much more expensive.)

    As far as I know, they all supports SDXC cards.

  • I was deleting files and delete something that now I can't play my music files... and my Youtube videos are no longer in sync with the songs. HD playler / Flash...? What I've done. ? How do I get it back

    I was deleting files and delete something that now I can't play my music files... and my Youtube videos are no longer in sync with the songs.  HD playler / Flash...? What I've done. ?  How do I get it back

    Hello

    As you are not sure of what you have removed for cause of your problems, I suggest that do you a system restore to a date before you start deleting these files, and then start carefully again, before to remove any file of dual control.

    How to make a XP system restore:

    http://pcsupport.about.com/od/fixtheproblem/HT/system-restore-XP.htm

    See you soon.

  • Looking at the video I can watch only about five seconds before starting the buffering. Is there a way to fix this?

    Looking at the video I can watch only about five seconds before starting the buffering.  Is there a way to fix this?

    Until video break is fully charged before you play. See the article below for more tips.

    http://www.ehow.com/how_5877763_buffer-video-streams.html

  • video monitor error is not compatible with this game - which can change in the settings on my netbook to run this game

    How can I change the settings to run a game on my netbook Windows xp... video monitor error is not compatible with this game.

    Hello

    Unfortunately, most netbooks do not have the resolution of the screen (or the graphics hardware) necessary to run graphics intensive games. Your best bet would be to run the game on a more powerful machine with a larger screen, or alternatively, as last resort try connecting an external monitor.

  • I have msn live hotmail and can not see videos sent email me all of a sudden

    I used to be able to see videos by e-mail sent to me, and now I can't, it just says loading in my temp folder and does not open?  What can I do to fix this?

    Link: http://answers.microsoft.com/en-us/windows/forum/windows_vista-sound/i-have-hotmail-msn-live-and-cant-see-videos-sent/23cf0db6-5282-e011-9b4b-68b599b31bf5

    I have msn live hotmail and can not see videos sent email me all of a sudden

    Hello SuzettePool,

    Thank you for visiting the website of Microsoft Windows Vista Community. The question you have posted is related to Windows Live Messenger and would be better suited to the Windows Live community. Please visit the link below to find a community that will support what ask you:

    https://windowslivehelp.com/product.aspx?ProductID=2

  • Need to know what video mini-DV cameras are compatible with Vista

    I recently upgraded to Vista, only to find my mini-DV camcorder is not compatible :( I need to get a new one anyway, but I want to make sure that the new is compatible with Vista before buy you. The camera must be also mini-DV, like all my work is on mini-DV tapes. Is there a link to a Web page that lists the video camera models supported by Vista? Any help would be appreciated; my work pile up!

    Hi the SpinelessIdiot,

    Microsoft has information about hardware compatibility for different versions of Windows, including Windows Vista. You can track the information of compatibility from the link below.

    See this link:

    http://www.Microsoft.com/Windows/compatibility/Windows-Vista/search.aspx?type=hardware&s=mini%20DV

    Check what DV - min camcorders are compatible with Windows Vista.

    You can check the characteristics of the available camcorders and see one that meets your need.

    Similarly, you can follow the compatibility information about other products. Search by product category (hardware and software) and the name of the product, or browse through the categories of hardware and software. Use the search to find one or two products. You can also use Browse to find information for multiple products from the same vendor, or product suppliers in a common category or subcategory.

    I hope this information helps!

    Kind regards

    Shinmila H - Microsoft Support

    Visit our Microsoft answers feedback Forum and let us know what you think.

Maybe you are looking for