How this guy do this with its background images?

In the following example, the background image stretches to fill your screen in real time (try resizing browser on the fly), but retains its proportions intact throughout. I didn't even know it was doable.

Can someone tell me how this is done?

http://www.serialcut.com/

Click options in the upper left to see other background images in action. The transition effect is not important. I am referring strictly to the properties ' full page + kept proportions "of these environments.

Is there a tutorial somewhere for that?

It seems they did a custom jquery plugin.  The problem is that eventually even with their method, the images have a limit.  Their image is 1920 x 1108.  So they made up a 1080 display.  After that the image could not be resized.  But to have the image resized, you must load the large image for all users regardless of their resolution of the screen.

The following link seems to have a similar distribution of jquery:

http://johnpatrickgiven.com/jQuery/background-resize/

Tags: Dreamweaver

Similar Questions

  • How to create a no with scrolling background image

    I searched a lot on the forum and able to paint my background either by overriding methods of painting/paintBackground of the screen or the Manager. But the background is still floating, which means that when the screen scrolls down, the background goes back and white space appears.

    My question is, how do I make the fixed background image?

    Have you checked this post?

    http://supportforums.BlackBerry.com/T5/Java-development/about-background-images-and-layouts/m-p/2442...

    T

  • How to fade along with a background image.

    Does anyone have a suggestion on how better to fade along with a background image, which left and right side exactly blends in the background. In addition, it should be a very gradual fade.

    My image is a model of 18px 1900px X and it supposed to repeat on the y-axis. I did apply a layer mask, select from the left and the right 250 250px. Then I went to put smoth to 100% and the feather to 100px, and cut the fethers part to see the fade.  It worked well, but you are still able to see the visible lines on each display of color fade. The re is a better way to fade and other image or something else I can try to make the transition to choke?

    Thank you!

    Looks like bands, not feather. try to work in 16-bit...
    / G

  • How to restore a flashdrive with its original files that have been replaced or removed?

    Original title: how to restore a flashdrive with its original files?  I accidentally replaced a file with an earlier version of this file.

    Missing file

    Hi, David B.Erkens,.
     

    Unfortunately, you can not recover the file from the flash drive. You may need to use some third party recovery software to get the file.

    Please use your favorite search engine and browse for such a program that is used to.

    Note: This response contains a reference to third party World Wide Web site. Microsoft provides this information as a convenience to you. Microsoft does not control these sites and no has not tested any software or information found on these sites; Therefore, Microsoft cannot make any approach to quality, security or the ability of a software or information that are there. There are the dangers inherent in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

  • How to create a window with its own window border other than the local system window border?

    How to create a window with its own window border other than the local system window border?

    For example, a border: a black line with a width of 1, then a transparent line with a width of 5. Inside, it's the content pane.

    In JavaSE, there seems to be for the JFrame paintComponent() method to realize the effect.

    I can't see what you're trying to do now: it's a little trickier. You need stage.initStyle (StageStyle.TRANSPARENT), and I think you have to imitate the transparent part of the border by the presence of a second vessel inside the root container, properly positioned.

    Something like:

    
    import javafx.application.Application;
    import javafx.application.Platform;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.AnchorPane;
    import javafx.scene.layout.StackPane;
    import javafx.scene.paint.Color;
    import javafx.stage.Stage;
    import javafx.stage.StageStyle;
    
    public class CustomBorderExample extends Application {
    
      @Override
      public void start(Stage primaryStage) {
      AnchorPane root = new AnchorPane();
      root.setStyle("-fx-border-color: black; -fx-border-width: 1px; ");
    
      StackPane mainContainer = new StackPane();
        AnchorPane.setTopAnchor(mainContainer, 5.0);
        AnchorPane.setLeftAnchor(mainContainer, 5.0);
        AnchorPane.setRightAnchor(mainContainer, 5.0);
        AnchorPane.setBottomAnchor(mainContainer, 5.0);
      mainContainer.setStyle("-fx-background-color: aliceblue;");
      root.getChildren().add(mainContainer);
    
      primaryStage.initStyle(StageStyle.TRANSPARENT);
      final Button closeButton = new Button("Close");
        mainContainer.getChildren().add(closeButton);
        closeButton.setOnAction(new EventHandler() {
          @Override
          public void handle(ActionEvent event) {
            Platform.exit();
          }
        });
      primaryStage.setScene(new Scene(root,  300, 200, Color.TRANSPARENT));
      primaryStage.show();
      }
    
      public static void main(String[] args) {
      launch(args);
      }
    }
    
  • Custom with a background image button had a white area around it

    Hello

    I have a screen with a black background and I am trying to add a custom button with a background image on it. But the custom button has a white border around it.

    Is it possible to remove this white border or black?

    Thank you

    Is the custom field button only focusable, or do you see it too when she does not have focus? Try drawFocus() substitution if it is only when he has developed there.

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

  • Menu Bar Spry Widget 2.0 with several background images.

    Hello

    I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).

    Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.

    http://www.mentalwarddesign.NET/Dynamech/about/index.html

    http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html

    1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?

    2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?

    3 here is what is referenced in the subject.  The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?

    Thanks in advance for helping this newbie. The responces are greatly appreciated.

    Ed

    If the markup of my menu bar is the following

    so I can style each button as follows

    #MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}

    background-color: orange;

    }

    #MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}

    background-color: red;

    }

    #MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}

    background-color: white;

    }

    #MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}

    background-color: blue;

    color: white;

    }

    GRAMPS

  • How to allow visitors to change the background image of my site?

    Hello.

    I wanted that my visitors to be able to change the background image to another image. Already, I know how to do it with the colors but doesn't seem to work wih images. You are able to do this on Google, but can not seem to find it anywhere online. I just want it to change while the visitor is on the site. for example

    1 visitor - context changes to-myarea.jpg

    2 visitor - context changes to-my cat.jpg

    and so on...

    This would not change the site forever, just at the point where the visitor is about it.

    Concerning

    Leon

    Here are a few ways to do this:

    Option #1:

    You'll need a JavaScript script and an array on the page background images.

    An example of work below.  View source in the browser to see the code.

    http://ALT-Web.com/BG-img.html

    Option #2:

    Create more than one style sheet with different colors and background - images of the body.

    Create a selector of stylesheet like this with jQuery

    http://www.kelvinluck.com/assets/jQuery/styleswitch/toggle.html

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

  • How to extract blood vessels of the background image of eye?

    We need extract the blood vessels of a set of background images of eye. We tried the magnetic lasso tool and the quick selection tool, but that doesn't give a very good accuracy and is very long. We have tried to select by color range ships, but that does not work either. We want results like the image. Is it possible to do a relatively good without going through the trouble of tracing along the vessels accurately?

    Query.PNG

    Once replicate you my original result, you can increase the contrast with:

    1 trick image, multiply the value

    2 brush gently and selectively with the Mode set to overlay

    3 fool the image, creating a slightly darker version (end of shadow of the scale through curves) and then retrieve only this darker part of the scale using the mixture if control and not affecting is not the end of the highest point of the scale.

    It will produce a result similar to this:

    Good luck.

  • Please help beginner with CSS background-image

    I use Dreamweaver CS4. I created a site on my computer. D:Data\Local_sites\Gravity_Works. In this directory using Dreamweaver, I created 3 files - css, images and models. In the pictures folder, I have an image - bg_body_winter.jpg. In the Templates folder, I have Gravity-works - Home01.dwt. I have created a new form of the page the template file and named index - test01.html and saved directly in the folder Gravity_Works

    I have this css code in a css in the css folder file:

    {body
    background: url(/images/bg_body_winter.jpg) top of Center no-repeat scroll #C1CAD6;
    }
    {body
    Police: 100% Verdana, Arial, Helvetica, without serif.
    margin: 0;
    }

    I downloaded the site in a test folder on my server at fatcow.com. You can see the page using the link below.

    http://www.openrangeimaging.com/test/gravity-test/index-Test01.html

    The image appears as it should be in Dreamweaver Live View. It does not appear in Design view. It does not appear in the preview of the local file in a browser. The image does not appear when you look at the index file - test01.html that is located on the server by using the link above. The specified background color appears but not the image.

    I'm confused about how I should name the path to the image. I think it must be relative root of the site so that anywhere, I have download the website, the image can be found. Can someone tell me how I should name the path to the image properly.

    I feel that I should know how doing this and looked around for help online and tutorial books I have, but I just don't get it.

    TIA for any help.

    In your linked css file the path to the background image must be as shown below (note points both in front of the bar oblique leader)

    {body
    Background: url (.. / images/bg_body_winter.jpg) no-repeat scroll top centre #C1CAD6;
    }

    If you have this image, the browser is trying to find a 'pictures' folder in your "css" folder and it appears no one.

    If you include the colon before the first slash the browser search the folder 'images' outside your "css" folder and in the folder root site.

  • Why my Firefox browser does not change its background image when I change the theme or personas

    When changing the theme or personas, I'm only able to get the top menu, tab bar and the bottom menu to change to picture the theme/personas, but not the background image. I try to change a lot of theme and personas and even useless.

    My origins are still white no matter how long I have to change. Any help?

    See;

  • DWCS4 behavior of the effects appear with DIV background image?

    Is it possible to use the effects appear on the background image in a DIV with the command 'OnLoad '. I want my banner to fade in (param) when the page is reached.
    It's the tag with that I want to use the above behavior:
    < div class = "dwBanner" > < / div >

    Thank you very much.
    www.dwdallam.com

    ...

  • How to export a vi with its dependencies

    New Lab mode, as in its infancy.  I'm trying to export / duplicate my bosses Lab View program to a different working directory on the same drive.  The goal is, I want to manipulate its code without risk of altering or damaging the original file.  To do this, my thought was to copy its program (with all its dependencies) in my home directory where all accidental deletions or modifications will not affect the original VI.  Searched the forums without success.  But it's my first time with them and I don't know that I am doing things.

    Does anyone know how to duplicate a program of Lab View in another directory?

    Thank you.

    Darren.

    Lab View version 9.0.1 2009.

    Using XP Pro 2002 SP3 w.

    First of all, I highly recommend you plan to use the source code control THAT SVN is quite easy to set up and it's free. It's actually the best way to manage several people playing with the same code. If you decide not to do so and that your boss is using projects (if all goes well it is) then you can do a "save under" on a project and it will duplicate the code. Be sure because it is possible to duplicate everything. You want to probably put two copies only the project files and not every VI called, including the navtive screw LabVIEW.

    One last thing, it spelled LabVIEW.

  • How to import the excel with its property sheet

    HII

    My task is to import my excel sheet in the control of my frontpanal... but on the excel sheet to open I want to update my forehead pave...

    Essential is my excel worksheet contains cells with different colors in each cell... my task is to import this file because it is in my spreadsheet to my Panel object before labview excel...

    can any 1 suggest me an idea how to implement this task...

    The Microsoft Office Spreadsheet ActiveX control will not import an Excel workbook. If you choose to use a table of LabVIEW control or ActiveX control, you can manually read the data in your Excel workbook using ActiveX (for Excel 2003 and earlier versions), and then fill the control (whether it is a table of LabVIEW or spreadsheet ActiveX control). Then, still using ActiveX calls once you must browse your Excel spreadsheet and read cell background colors, and then define the cells of the table LabVIEW control or control ActiveX to be the same. This is done by using the properties of the controls.

    Bottom line: this is a very manual process. For example, the attached VI is one that I post quite often. It will read the data from an Excel worksheet, and place it in a table of LabVIEW Control.

    Another option is to simply use a web browser control and display the worksheet by using the Excel plugin browser, as this is explained in this article: using the browser control Microsoft Web to incorporate a spreadsheet Excel in LabVIEW.

    Question: Why do you need to do this? What you are trying to accomplish in the long term? Perhaps there is a better way to do it.

Maybe you are looking for

  • I'm suddenly needing help with my browser Firefox (6.0.2)

    HelloI'm suddenly needing help with my browser Firefox (6.0.2) (OS: I use Windows XP). When I open the browser, I don't see is a totally white screen of white, with all the toolbars at the top. I know that my physical connections are very good: I hav

  • Operating systems and software

    Office unable to keep synchronized with the time. I have to change constantly.  Running Vista Edition Home Premium

  • Of cover and hinges replacement broken on Satellite Pro L100

    Hello I'm hoping to find some more info if I can. I have a Satellite Pro L100 and I got it for about 15 months, for the second time again the lid cracks around the hinge area, it is now out of warranty! I know that I need to replace the lid and the a

  • Error with the DLL and constructor

    Fellows OR... I have a problem to access the functions in a dll to aid one. Net20 object. When I try to access the functions in the DLL using a constructor of .NET, I get an error message indicating that "year error occurred trying to load the assemb

  • Palm 3245 Bluetooth keyboard and metal case OEM

    I'm considering buying a Palm TX OEM metal case. The Palm should be withdrawn from the case for the Palm 3245 Bluetooth keyboard works? The OEM case will have a metal hinge? It attaches to the Palm, as does the folding cover leather? Thank you!