Background Image/Video - full scale & centered

Trying to figure out how to animate a centered background reduced onboard image/video.  Can't code, so I am using the Properties panels, but I'm a bit confused. I want to

1. have the image centered in the middle of the scene

2. do evolve to fill the screen always, so there is no black bars (IE, I want a step with only a photo to this topic)

http://whakarongo.com/stage/index.html

(This project is intended only for iPad and more - desktop computer, don't need mobile resolutions)

My work around is to do it via manual CSS, but there must be a better way to keep within the compositiion of edge

I also tried to import this edge in redesign stage or after seeing this demo http://www.YouTube.com/watch?v=bK2lhP7oyFQ

but I just blank screens: http://whakarongo.com/stage2/index_preview.html

(I love not ability to reflow to specific resolutions target but I absolutely need it for this project)

If someone did or is code warned, would appreciate your kind assistance.

made a model for a fullscreen html5 video

his is alwase full screen even when resizing to mobile format.

https://app.box.com/s/r6dg3cj1xd8kpjkurap9

Have fun.

-Rob

BTW, if it helped you to put this post as correct anwser

Tags: Edge Animate

Similar Questions

  • background image on full screen

    I want a background image to cover the complete bottom in Muse. When I import assuming on my master. What should I do for the layout will appear no white space on the bottom.

    My picture goes on the plan of work, but I still have a white bar at the bottom when I saw it.

    Any help would be appreciated.

    Thank you

    You hear as a fill for the browser or page content indicate?

    Way, either go to the tool to fill in your toolbar and add your image as background to and set it to scale to fill.

  • Insert alternative background image if full-screen video does not play in muse

    Hi people,

    I use a video widget fullscreen in Muse. If the video does not appear, I want to show an image.

    Video does not play on the iPad - others do but not the full-screen one.

    So is their option another code that is see the image if the video does not play?

    Something maybe I could stick in the header that is so iPad display image or if the video plays that image?

    Thanks in advance.

    Ciao

    Cathy

    It would be difficult, you need to customize it.

    An idea can be seen here:

    http://StackOverflow.com/questions/5920830/HTML5-video-redisplay-poster-image-onmouseout

    Thank you

    Sanjit

  • Fill text with a picture and zoom so that we can "dive" into the text to see the image in full scale

    Hello

    I made a text filled with an image, and I'd like to zoom in on the letter, as if we can "dive" into the letters, then see the whole picture in full scall (my resolution is 1920 x 1080). Do you know how to make such an animation?

    screenshotjpg.jpg

    Here's a screenshot to show you what I did.

    I assume you are using the 2 as a track matte for an image. I can only imagine because you gave us no details or a screenshot of your computer with all the properties changed all of the layers has revealed. I assume you want to reveal the image below rather than pushing into it.

    If this is the case, then you can make the layer containing the number 2 a 3D layer and animate the position so that it moves to and in front of the camera or you can leave the 2D layer and animate the scale the layer. If you use the 3D trick, you will get a more natural look. You can consider to move the anchor point of the layer to the part of the 2 that you want to be at the center of the revelation. This is what a basic 3D displacement would look like.

  • 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;

  • How to set a background image re-scalable depending on the screen resolution of viewers

    Hello

    I searched the net for ages looking for a way to make a background image on the scale according to the size of a monitor of viewers.

    I found a solution:

    Source code

    < body >

    "< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

    < / body >

    CSS (style)

    {img.BG}

    / * Define the rules to fill the background * /.

    min-height: 100%;

    min-width: 1024px;

    / * Set up a proportional scaling * /.

    Width: 100%;

    height: auto;

    / * Set up positioning * /.

    position: fixed;

    top: 0;

    left: 0;

    }

    @media screen and (max-width: 1024px) {}

    {img.BG}

    left: 50%;

    left margin:-512px. }

    }

    Now, this has the desired effect, however when I place a div below "< img src ="... /... "' / Images/Connor/background_bg.png ' class = 'bg' > ' in the body of my site, it pushes this div below my bottom.

    I got the code from " " http://CSS-tricks.com/perfect-full-page-background-image/ "and it does not seem to do this in this example. "

    I pasted my complete code below, if someone could have a look and advise where I'm wrong that would be greatly appreciated.

    Thanks and greetings

    Elliot

    Source code

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    " < html xmlns =" http://www.w3.org/1999/xhtml ">

    < head >

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

    < title > Untitled Document < /title >

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

    < script type = "text/javascript" >

    function MM_swapImgRestore() //v3.0 {}

    var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;

    }

    function MM_preloadImages() {//v3.0

    var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();

    var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)

    If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}

    }

    function MM_findObj (n, d) {//v4.01

    var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}

    d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}

    If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];

    for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);

    If (! x & & d.getElementById) x = d.getElementById (n); Return x;

    }

    function MM_swapImage() {//v3.0

    var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).

    If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}

    }

    < /script >

    < / head >

    < onload of the body = MM_preloadImages('..) « /.. / Images/Connor/nav_bar/home_ro.png ','... /... / Av_bar/about_me_ro.png images/Connor/n ','... /... / Images/Connor/nav_bar/c.v_ro.png ','... /... / Bar/portfolio_ro.png images/Connor/nav_ ','... /... (/ Images/Connor/nav_bar/contact_me_ro.png') ">"

    "< img src ="... /... ' / Images/Connor/background_bg.png ' class = 'bg' >

    < div id = "web_centre_wrap" >

    < div id = 'menu_bar' > < table width = "960" border = "0" cellspacing = "0" cellpadding = "0" >

    < b >

    "< td width ="105"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_left.png" width = "105" height = "68" / > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image3 '", '... /..) " (/ Images/Connor/nav_bar/home_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/home.png" name = "3" width = "147" height = "68" border = "0" id = "3" / > < /a > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image4 '", '... /..) " (/ Images/Connor/nav_bar/about_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/about_me.png" name = "Image.4" width = "147" height = "68" border = "0" id = "Image.4" / > < /a > < table >

    "< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage (' picture5 '", '... /..) " (/ Images/Connor/nav_bar/c.v_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/c.v.png" name = "Picture5" width = "148" height = "68" border = "0" id = "Picture5" / > < /a > < table >

    "< td width ="147"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image6 '", '... /..) " (/ Images/Connor/nav_bar/portfolio_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/portfolio.png" name = "Image6" width = "147" height = "68" border = "0" id = "Image6" / > < /a > < table >

    "< td width ="148"height ="68"> < a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('Image7 '", '..) " /.. (/ Images/Connor/nav_bar/contact_me_ro.png',1) "> < img src ="... /... "/ Images/Connor/nav_bar/contact_me.png" name = "Image7" width = "148" height = "68" border = "0" id = "Image7" / > < /a > < table >

    "< td width ="118"height ="68"> < img src ="... /... "/ Images/Connor/nav_bar/nav_bar_right.png" width = "118" height = "68" / > < table >

    < /tr >

    < /table >

    < / div >

    < div id = "header" > < / div >

    < div id = "content" > < / div >

    < div id = "footer" > < / div >

    < / div >

    < / body >

    < / html >

    CSS (style)

    @charset "utf-8";

    / * CSS document * /.

    {img.BG}

    min-height: 100%;

    min-width: 1024px;

    Width: 100%;

    height: auto;

    position: fixed;

    top: 0;

    left: 0 ;}

    @media screen and (max-width: 1024px) {}

    {img.BG}

    left: 50%;

    left margin:-512px ;}

    {#web_centre_wrap}

    Auto margin: 0 ;}

    {#menu_bar}

    #header {}

    Background: url (.. /.. Images/Connor/Header.png) ;}

    #content {}

    Background: url (.. /.. Images/Connor/content.png) ;}

    #footer {}

    Background: url (.. /.. Images/Connor/footer.png) ;}

    Try this:

    http://ALT-Web.com/test/resizable-BG.shtml

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/


  • Background image to be aligned with the top of the browser window.

    I have a background image that I have centered, but I also want to flush to the top.

    *

    {

    margin: 0px;

    padding: 0px;

    }

    {body

    background: #4992 b 2 url(images/blue.jpg);

    font: 14px Arial, Helvetica, without serif.

    color: #464646;

    margin: 0 auto;

    padding: 0px;

    background-repeat: repeat no.;

    background-position: center;

    }

    This is part of my css... is there something that I am missing?

    {body

    background: #4992 b 2 url(images/blue.jpg); top Center no-repeat;

    font: 14px Arial, Helvetica, without serif.

    color: #464646;

    margin: 0 auto;

    padding: 0px;

    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB
    www.Alt-Web.blogspot.com

  • sensitive presentation of background video full screen

    Hi guyss


    in the old version, you can create a version of office with the video full screen background and other tablet or mobile with a background image. In the sensitive version I don't know how to change the video to an image automatically when it reaches the breakpoints defined for tablet or mobile.

    This is one of the caveats of sensitive design. There may be a few replacement widget that can deal with this by assessing the size of the browser window, but otherwise, I'm not aware of a way to do in Muse. The survey would have to happen inside the widget itself before actually loading the video to not spoil the bandwidth, which Muse cannot currently because it is based on the size of the overall page.

    Mylenium

  • Faced with centered Background Image

    I have the code that I found always give me a background focused on a screen image.  It is based on the ideas presented here:

    http://supportforums.BlackBerry.com/T5/Java-development/MainScreen-explained/Ta-p/606644

    However, the code does not, at least not for me.

    I tried other variations as well, as the addition of another not VFM of scrolling, then adding data scrolling to the optimization of resources, but even this indirection suffers from the same problem.  Have two screenshots to show, the 'exclamation' should be at the centre according to me!

    Code follows.

    To illustrate the problem, just space out the field change with "entry" for more complete screen.  Then the same thing to one below the Bitmap and then scroll and down using the trackpad.  I suspect that you will see the problem.

    I saw this on OS 6.0 and 7.0 OS simulators.  Not tested on OS 5.0 and tested only on touchscreen devices.  I'll do some more tests later.

    Someone at - it suggestions on the subject of how we get the "centered" background Bitmap actually stay in the Center will still let me add lines to my editfields and scroll using the trackpad?

    Net.rim.device.api.system import. *;
    Net.rim.device.api.ui import. *;
    Net.rim.device.api.ui.component import. *;
    Net.rim.device.api.ui.container import. *;

    /**
    * A screen class to test background bitmap images.
    */
    SerializableAttribute public class BackgroundImageScreen extends screen
    {
    private int backgroundColor = 0x00FF0000;
    private bitmap _backgroundBitmap = Bitmap.getPredefinedBitmap (Bitmap.EXCLAMATION);
       
    Constructor
    public BackgroundImageScreen()
    {
    Super(Manager.USE_ALL_WIDTH |) Manager.USE_ALL_HEIGHT | Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
    setTitle (new LabelField ("Background Image Demo"));
    VerticalFieldManager backgoundManager = VerticalFieldManager(Manager.USE_ALL_WIDTH | nouveau Manager.USE_ALL_HEIGHT |) Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR) {}
    {} public void paintBackground (Graphics g)
    int currentVackgroundColor = g.getBackgroundColor ();
    try {}
    g.setBackgroundColor (backgroundColor);
    g.Clear ();
    } {Finally
    g.setBackgroundColor (currentVackgroundColor);
    }
    int managerWidth = this.getWidth ();
    int managerHeight = this.getHeight ();
    centerX = int (this.getWidth () - _backgroundBitmap.getWidth (()) 2.
    centerY = int (managerHeight - _backgroundBitmap.getHeight ()) 2.
    System.out.println ("current position:" + Integer.toString (centerX) + ":" + Integer.toString (centerY) +)
    ", Far manager:" + Integer.toString (managerWidth) + ":" + Integer.toString (managerHeight) + "."
    ", Manager virtual:" + Integer.toString (this.getVirtualWidth () + ":" + Integer.toString (this.getVirtualHeight () + "."
    ", ManagerScroll:" + Integer.toString (this.getHorizontalScroll () + ":" + Integer.toString (this.getVerticalScroll ())); "."
    g.drawBitmap (this.getHorizontalScroll () + centerX, this.getVerticalScroll () + centerY, _backgroundBitmap.getWidth (), _backgroundBitmap.getHeight (), _backgroundBitmap, 0, 0);
                       
    }
    };
    backgoundManager.add (new EditField ("scrolling test:", "Enter the text here to scroll"));
    backgoundManager.add (new SeparatorField());
    backgoundManager.add (new BitmapField (Bitmap.getPredefinedBitmap (Bitmap.QUESTION)));
    backgoundManager.add (new SeparatorField());
    backgoundManager.add (new EditField ("test an another parchment:", "Enter the text here to scroll"));
    This.Add (backgoundManager);

    }
    }

    Ahh, touch screens...

    I remember I had to invalidate the Manager paint extra stuff (vertical scroll bar in my case) in scrollChanged() specifically for touchscreen devices. So one thing to try is to implement ScrollChangeListener in your main screen or your added VFM and invalidate the VFM in scrollChanged. This should fix the problem, even if it will be a drop in performance.

    I suspect that the touchscreen devices have certain graphic hardware acceleration, which makes them more effective when scrolling but it lacks what BlackBerry stuff framework is not aware (for example your paintBackground according to the positions of scrolling).

    I'm curious to know what happens if you use setBackground on a scroll, no Manager and add the scroll with no bottom paint on top of it. setBackground, being a built-in could make better use of their hardware acceleration.

  • Creating a background Image full screen

    Hi guys, I created a background image of the browser by 1920p wide by 1600 p deep.  When I place it in my master page, the original size and select high in the Center, the image is placed in an area that covers the left side of the screen of the browser anywhere on the right side of my page 960p border.  The remaining right side of the browser area is empty, as my image is not wide enough.  Have did something wrong or there at - it a setting I have to do something with the settings?  My page size of work area is the default 960 x 500 p p.  Thank you.

    Set your "suitable" to "Scale up" If you want your picture to imitate the size of your browser.

    Also set your 'Position' to the PIN in the Center.

  • Background image full screen

    Note: Looking to make a complete a background image for Web site...

    I tried my best to follow a step by step YouTube video (Background Image CSS3 - Dreawmeaver CS6 Tutorial - YouTube fullscreen) but it stops working at 03:40, because the CSS rule book does exactly the same thing. I have tried my best to understand how some words/phrases may have changed for hours but kept getting blocked for example has not been able to find a way 'to create a new css rule' by setting standards for the jpeg file to be used as the background pic.

    So, if someone wants to check the video out and understand how the directories have changed in that the amendment of evolution "css rules" (especially of downloaded jpegs would be great and I want to thank is ' a ton.) Nothing against the narrator of the referenced video here... it's just that there have been updates and his video is a bit outdated, I guess.

    Do you think that your BG image is sort of MASSIVE for use on the web?

    2, 025px × 1, 471px

    Why use a massive image when a smaller will do the same thing?

    If you want to support older browsers (and you should) add the vendor prefixes.

    As I said in my first answer, that is the code.  I use shorthand CSS because it takes less space. I also add the default background color just in case users have images turned off or if the image fails to load correctly.  You can change the color of what you want.

    {body

    Background: #000 url(Images/care-and-counseling2.jpg) no repeat fixed Center;

    / * for Safari, Chrome * /.

    -webkit-background-size: cover;

    / * for Firefox * /.

    -moz-background-size: cover;

    / * for Opera * /.

    -o-background-size: cover;

    / * for all other browsers * /.

    background-size: cover;

    }

    Good luck with your project!

  • My images will not display full scale, how do I fix?

    Hi, I'm new on this and for some reason that my pictures do not appear in full scale on adobe cs6 first. It's really annoying because I'm doing a stop motion video, but I don't see what I'm doing. Please answer soon, that it is an important project. Thank you

    Lilly.Love wrote:

    Hi, I'm new on this and for some reason that my pictures do not appear in full scale on adobe cs6 first. It's really annoying because I'm doing a stop motion video, but I don't see what I'm doing. Please answer soon, that it is an important project. Thank you

    Your sequence settings and parameters of the clamp do not match. To match them, right-click on a clip and choose new sequence of the Clip and a new sequence will be created based on the settings of your clip.

  • Adding video to a background image

    Hello

    Having a little trouble here. I first items 10 and I am trying to understand something.

    I have a background image that I want to be able to add a video in a small section of it, while the rest of the image is still there. The area is framed, so she would go in a specific area on the image.

    It would be the kind of resemble the appearance of most of your series of news with video on the shoulder of the person, just rather than be a live person, it's just a fixed image which is the video in.

    I tried to use the green screen key and it will be black on the green box, but it won't put the video in there. I have the Video 2 video with the picture on video 1. When I add the video in a few video overlays 2 it the whole thing and I can't see the background image at all.

    Any help would be appreciated.

    If you need, I can provide a link to someone elses youtube video to show what it is I'm doing.

    Thank you

    Michael

    Are you talking about a Picture-in-Picture effect - with a person sitting in a news desk insert and a photo or video in the top left or top right of the screen?

    Here is a tutorial - but how do you precisely depends on what version of the program that you are using.

    http://www.YouTube.com/watch?v=mzYs-ifrHjU

  • StandartTitleBar background image without scale? !!!

    Hi all

    I just find this StandartTitleBar and you want to use it, but I noticed that when you try to set the background image, it is automatically scaling.

    How do I remove it?

    Ok thank you!

    I have forgort just to make this post solutioned, I found that the same thing can be done in the paint method.

  • Background image does not fill the window full screen

    Guys I have an image that is larger than the stage, but when I play this movie in the player, the background image is cropped on the sides, which is on the left and the right there is a margin gray about 2cm wide.

    Any ideas how to solve this problem, then the background image covers the whole scene?

    Thank you.

    I mean that you can not change the way that your swf is displayed unless you change the scene or display list objects.

    If you want to change the scene to show all of your background, click Modify > document settings > select "fit to content" for the size of the stage.

Maybe you are looking for