Proportionaly scaling down background image when restoring down browser window

Hi all, i need some help, i want to minimize(scale or restore down) window to not-fullscreen browser window (and ajusting size of window manually over arrows in the corners of the window) and retain background picture full size (i need to picture proportionally follows screen scaling).
I`m new into flash stuff, so please tell me if it is the code or what, and if you know part of code that will do the job, write me down!
Thanks!

I take it you want a liquid effect.  I wrote a site that does that or rather the background of this site does that http://www.droolpigs.com/ .  It's fairly simple just tell the backrgound to change width and height on stage resize.
    public class NuPigs2 extends MovieClip
        var holder:btnHolder; // container for nav buttons
        var onStage:*;     // this can be anything
        var ratio:Number;
        var rRatio:Number;
        var newRatio:Number;
        var com:FLVPlayback;
        var bkg:*;
        public function NuPigs2(){
            com = new FLVPlayback();
            setCom("droolPigsWrestling.flv");                     // set the video for player com
            addChildAt(com, 0);
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;    // this is needed for resizing to work
            onStage = com;                                                   //  the video player is assigned to onStage
            ratio = onStage.height/onStage.width;
            rRatio = onStage.width/onStage.height;
            addHolder();
            fillBG();
            stage.addEventListener(Event.RESIZE, fillBG);
////////////////////// FILL BG ////////////////////////   
// this code makes the video resize with the stage
        function fillBG(evt:Event = null):void {
            newRatio = this.stage.stageHeight/this.stage.stageWidth;
            holder.x = this.stage.stageWidth - (holder.width +25);    // position the buttons on the right
            holder.y = 50;
            if (newRatio > ratio){
                 onStage.height = this.stage.stageHeight;
                 onStage.width = (this.stage.stageHeight * rRatio);
                else {
                  onStage.width = this.stage.stageWidth;
                  onStage.height = this.stage.stageWidth * ratio;

Similar Messages

  • Need help flushing background image to top of browser window

    OK, this may be a very common problem, I'm just an idiot. In
    Dreamweaver I have a background image in a centered div on the
    page. Can anyone help me get that div to the absolute top of that
    screen? I've already set the body tag to 'margin=0 padding=0' but I
    don't know what else to do. Now when I look at it it's fine on my
    pc but the mac is the one that displays the space....Help!
    -Thanks, Nathan
    Website in question:
    www.stormsheltersdirect.com

    Your site is asking for a user name and password?

  • Background image when recording video on iphone like in photobooth?

    Is there an app that places a background image when video recording like in photobooth?

    Thanks for your reply . I've removed the cover when doing both tests I mentioned. The earphone I used is at good condition and I don't see any problem with it. I've also reinstalled the iOS as your instruction, but still no luck, the video sound still has noise.
    I've decided to export the video file to my PC to see if I can hear sound better or not, as it's hard to hear and sound except noise with the external speaker on my iPhone even at maximum volume. On my PC I had to increased playback volume to 100%, set volume booster to 300% and applied noise reduction plugin (I use Media Player Classic on Windows 7) to get an acceptable sound (still noise but better than the original). If I don't boost the volume, it's hard to hear anything. I don't expect it to be crystal clear like the voice memo (using the bottom mic), but too much noise like this is really bad.
    So I think it appears to be a hardware-related problem. I will later consider to send it to a phone repair shop or keep it and accept this bad video sound problem . In Vietnam we just have Apple authorized resellers but don't have any official Apple repair shops, that's why I'm still confused as I don't really trust those phone repair shops to handle my iPhone. Anyway, thanks again for your comment .
    P.S: it maybe a little off-topic, but do you know any video recording app that using the bottom mic ?

  • Help with image placement in new browser window.

    I need help trying to position images that are being opened
    in a new browser window. I have created a photo gallery with
    thumbnails that are links to the larger image. Ive used the
    behaviors panel to open the new image in a new browser window but
    the image is always shown at the top left margins of the new
    window. Is there a way to 1. center the image in the new window, 2.
    change the background color of the new window that opens.
    Any help would be appreciated.
    Stu

    If, as I read it, you are simply opening the image, it will
    always be upper
    left and cannot be changed. IF you wnat to position it, you
    will need to
    create a new html page and position your image on that page,
    then call the
    page, not the image from your thumbnail link.
    In Dreamweaver in the command menu try the "Create Web Photo
    Album" command.
    It will create all of your pages, links and thumbnails for
    you. (requires
    Fireworks)
    Michael Hager
    www.cmhager.com
    "Stu127" <[email protected]> wrote in
    message
    news:eo70n5$qo5$[email protected]..
    >I need help trying to position images that are being
    opened in a new
    >browser
    > window. I have created a photo gallery with thumbnails
    that are links to
    > the
    > larger image. Ive used the behaviors panel to open the
    new image in a new
    > browser window but the image is always shown at the top
    left margins of
    > the new
    > window. Is there a way to 1. center the image in the new
    window, 2.
    > change the
    > background color of the new window that opens.
    >
    > Any help would be appreciated.
    > Stu
    >

  • The "Restore Down" button doesn't restore down.

    In the upper right-hand corner of the screen (where the red X is), the middle button (Restore Down) doesn't restore down. How do I fix this??

    I saw this problem on a store's demo machine (model 300-1125). Very annoying. My impression is that the touchscreen is faulty and doesn't register clicks at the top right corner. Minimize any windows and just try clicking on the desktop in that area. If there is a click registered you should see a "growing circles" animation at the finger position. If you only see the "touch dot" then the touchscreen only regarded this as a movement and not as a click.
    Also verify that the maximize/minimize/close buttons are not the problem by resizing a window so it doesn't fill the screen, and then click them (so the top right corner of the screen is avoided).
    If this checks out this might be a problem affecting the whole series, which is pretty serious if it is a hardware problem. (I have tried the same thing on an MSI all-in-one with a similar touchscreen technology and Windows 7, and it doesn't have the problem.)

  • How to create a scaled page background image?

    Hi - does anyone know of a way of creating a page background image which will scale to fit any screen width?  I've tried googling it, but get back so many complicated explanations that I don't know which to believe.  Up until now I've resorted to creating a large image, usually around 1700 x 1400px, which just about works, but obviously smaller screens lose a lot of it.  I'd really like to understand how to do this properly,
    Thanks
    SW

    How far back in browser version history do you want to support?
    IE9+ and any modern browser (like Firefox, Safari, Chrome and Opera) will work with the background-size:cover attribute:value in CSS3: http://www.w3schools.com/cssref/css3_pr_background-size.asp
    For older browsers, you'll need a bit more complicated solution using javascript like this page: http://louisremi.github.io/jquery.backgroundSize.js/demo/

  • Safari doens't show background Image when sliding page left

    I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image in mobile Safari & the right part of photo is beyond the screen.
    I touch & slide the page left to see right part but found there's no background image below the right part but only white blank background.
    Does anyone know how to make Safari display the background image below the right part?

    I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image
    Does this mean that the large photo IS the background and set to repeat via CSS or HTML? In this case Safari might cut off the image that is not within the viewable bounds of the web page for memory reasons. Just a thought.
    Jason

  • WAD: Background-Image when dropping Web-Item

    Hi specialists,
    I've got the following issue:
    As soon as I drop an WebItem into (let's say) a div-element, the WAD adds the following items to the XHTML-Code of the div-Element:
    oheight="423" owidth="714" height="423" width="714" iwidth="714px" iheight="423px" src="file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png"
    and the following into the div's style-attribute:
    BACKGROUND-IMAG E: url(file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png);
    Can anybody explain this behaviour ? What are this background-Image (which seems to be a dummy-image) and the non-standard attributes used for ?
    So far I always needed to remove this attributes/style-element manually after inserting a new web-item - which is quite inconvenient... - Is there a way to disabble this

    You don't convert code from Spry.  You eliminate Spry and start over with a better Menu.
    If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a good investment and it's mobile &  touch screen friendly.
    http://www.projectseven.com/products/menusystems/pmm3/index.htm
    jQuery Superfish (free)
    http://users.tpg.com.au/j_birch/plugins/superfish/
    jQuery MegaMenu 2  (free)
    http://www.geektantra.com/2010/05/jquery-megamenu-2/
    To answer your first question, you want a persistent indicator.
    Making a persistent page indicator on site wide CSS Menus
    Nancy O.

  • How to get background image to fill the browser and remain fixed in both IE and Firefox?

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Red Xs show up on images when viewing site in Windows

    After adding some pages (from the standard templates) and content, the site (published to mac.com) displays on Windows XP and Vista with red Xs in the top-left corner of every image. The images do show, but that X is there on every one. Check it out at marrs-attacks.com. It also loads and/or renders very slowly (I can't tell since IE doesn't have a load progress indicator that I can see). Also notice the nearly invisible Made on Mac image at the bottom-center. Everything appears correctly and quickly on a Mac.
    Other pages such as turnstyleband.com, also recently created and published by iWeb '09, don't show this problem (although one big difference is that the first site has background images and the second doesn't).
    Any ideas, or is it just another iWeb bug that I need to report?

    From the article I linked you to:
    ... if The image is displayed based on a script, an ActiveX control, a cookie, a Java program...
    If you disable Java in Safari the pictures don't show up at all. iWeb is using Java to generate the photo albums. If the users allowed Java all would probably be golden. Security settings are all over the place on Windows machines. Some antivirus software will also disable what it thinks are security holes. Unfortunately, many websites use Java for their functionality.
    This is why, on my main page of my site I avoid the nav bar. I created my own nav bar with links to avoid the Java problem. I let the nav bar show on other pages because I am less concerned with them. Some other programs other than iWeb can create photo pages in standard html which you link to instead of using the java-based page iWeb creates.
    If you want to build a truly friendly site avoid java, and avoid effects on your photos which creates large png files and makes the site load slower. I have also found that using a page background and browser background slows down the site. Just use a browser background. You can also open the files on your iDisk and optimize the photos, using a photo editor like Adobe Photoshop Elements. You will lose little quality and drastically improve the load time.
    Kurt

  • Background Image Not Visible in Browser

    I have searched the forum but I'm not finding a solution that
    works.
    I'm trying to put a background .png image in a header. It
    shows up in Dreamweaver but not in preview mode. I have an external
    style sheet that contains this:
    .twoColFixRtHdr #header {
    background-repeat: no-repeat;
    height: 126px;
    width: 770px;
    padding: 0;
    background-position: left top;
    margin: 0px;
    background-image: url(assets/pictures/banner_3.png);
    My page contains the following:
    <div id="header">
    <h1 class="banner_title_top">Text</h1>
    <h1><span class="banner_title_bottom">Text
    </span>
    <!-- end #header -->
    </h1>
    The ".twoColFixRtHdr" is coming from the fact that I'm using
    a pre-made Dw CSS layout.
    Any help is very appreciated.
    Jason

    Should have made no difference.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "j-hill" <[email protected]> wrote in
    message
    news:fb4cnk$fku$[email protected]..
    > Out of desperation I tried to convert my image to a .jpg
    and it seems to
    > be working fine.
    >
    > Thanks,
    > Jason

  • How do I adjust my background image to fit my browser

    I have a background image that it 1600 x 1200 and when I try to view in browser, almost half the image gets cut off. How do I adjust the size to fit my browser or even adjust it to fit any browser?

    1600 x 1200 is a huge image by web standards.  Images don't resize to fill viewport without workarounds (tricks).  And while Martin's solution works in some browsers, it's not bulletproof.  Downsides may outweigh advantages. 
    For best cross browser results (including older IE), establish a fixed page width of say 1000px to fit on average displays.  Center your page layout.
    Open your image in Photoshop or Fireworks and resize it  to 1000 x 750.   Your image won't fill the viewport but it will fit your page width.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Background image not cached in browser

    Hi,
    Using JDeveloper 11g R1.
    We have a template, with a PanelGroupLayout component with a background image, like follows:
    <af:panelGroupLayout layout="horizontal"
    inlineStyle="width:100%; height:2px; background-image:url(&quot;images/separacioRalles.jpg&quot;); background-repeat:repeat-x;"
    id="pt_pgl5">
    In runtime, the request made by the browser includes and _adf.ctrl-state=xxxxxx parameter, which I supose causes the browser not checking the cache.
    image/jpeg     http://127.0.0.1:7101/ViewController-context-root/faces/images/separacioRalles.jpg?_adf.ctrl-state=1bn1yq032y_79
    Is there any way to avoid this _adf.ctrl-state? or another way to set the desired background?
    Thanks,
    Roger

    Hi Frank,
    Not working fine at all.
    I tried as you said:
    <af:panelGroupLayout layout="horizontal"
    inlineStyle="width:100%; height:2px; background-repeat:repeat-x; background-image:url(&quot;/images/separacioRalles.jpg&quot;);"
    id="pt_pgl5">
    and this is the request received on the server:
    127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /images/separacioRalles.jpg HTTP/1.1" 404 1214
    Comparing with an af:image component:
    <af:image shortDesc="asdf"
    source="/images/help.gif" id="pt_i1"/>
    the request received on the server:
    127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /ViewController-context-root/images/help.gif HTTP/1.1" 304 0
    If I put the contextroot in the background-image:url (background-image:url(&quot;/ViewController-context-root/images/separacioRalles.jpg&quot;), it works fine.
    127.0.0.1 - weblogic [28/ago/2009:10:44:28 +0200] "GET /ViewController-context-root/images/separacioRalles.jpg HTTP/1.1" 304 0
    So seems that the background image url is not built in the same way as using af:image component.
    Roger B

  • Just 1 Background image to fill the browser & NOT tiled images

    After reading some of the suggestions given in this forum, I gather that I have to use CSS to get around this problem. What I did was:
    in a Notepad text editor, typed & saved as mystyle.css
    body
    background-image:url('gradient-3-max.jpg');
    background-repeat:no-repeat;
    (*note: fr the CSS tutorial > How to > external style sheet. I may not have understood it completely.
    Reads: ...... Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:)
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle" />
    </head>
    I added this tag in my HTML document, however, the background is still tiled.
    Where did I go wrong? I am a newbie to flash, so kindly guide me thru each step
    Thank you!
    Karen

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Faux column background not aligned in smaller browser window...

    I'm working on a three-column webpage.  I'm using fixed-width columns, with the left and right columns floated (started with a dreamweaver layout).  I am also using a background applied to the <body> tag to apply the faux column look, so that the side column backgrounds flow all the way down the page.
    My layout is a total of 780px wide, but the background image I'm using is 2000px wide.  It's the same image that was used in the previous version of the website, and I can only guess that the image is that wide to "fill" the extra space around the main content when the browser window is wider than 780px.  Because the image is so wide, I have it styled to center on the page.  When my browser window >= 780px wide, everything looks great... the faux columns line up perfectly with the divs.  However, when I make the window less than 780px, things get messy.
    My layout elements stay where they are, meaning that the left edge of the container stays aligned with the left edge of the screen and a scroll bar appears at the bottom.  However, since my background is set to center itself, it continues to try to center itself in the browser window.  Basically, the content is not centered in the browser window, but the background is, causing the faux columns to not line up with the divs.  The relevant CSS I have applied is:
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 12px;
        color: #666666;
        background-repeat: repeat-y;
        background-position: center;
        background-image: url(../img/BG-gray.gif);
    #container {
        width: 780px;
        margin: 0 auto;
        text-align: left; /* this overrides the text-align: center on the body element. */
    Note: everything within the container div stays where it should relative to the container, so I didn't include the CSS for them, though I can post it up later if you really need to see it.
    Is there a way to keep everything lined up in a smaller browser window? Or, would it be better to trim down the background image to the same width as the container?
    Sorry for the long message, but I'm new at this.  Please don't eat me.

    Same problem, only worse.  That causes the background to show from the very left edge of the image.  All my text is in the gray area in the example below.  Let me try to clarify...
    The background image is something like this (colors are for clarity):
    (filler)
    Left faux column
    Main content goes here. This is always in the center of the browser window.
    Right faux column
    (filler)
    Where the combined width of the blue, white, and red sections is 780px.  This is what I want my layout to line up with, the blue and red columns being the faux left and right columns, respectively.  The gray areas are "filler" that colors the excess width in browser windows that are wider than the fixed width of the main content.  With the background set to centered, the white stripe is always centered in the browser window.  As long as the window is wider than my layout, the layout is centered in the browser window as well.
    I'm looking for a way to either center the background relative to the layout container, not the browser window, or to keep the layout container centered in the browser window when the window is narrower than the layout.

Maybe you are looking for