Application Background Image ?

Hi Folks,
Instead of a dull background color, how do I show an image during 1-2 seconds, while my application is loading?
Thanks for your help,
VC

FYI - In the next release of Flex (codename "Hero") you will be able to specify a splash screen image pretty easily by setting the splashScreenImage property on the application. Check out this spec for more details: http://opensource.adobe.com/wiki/display/flexsdk/Mobile+Splash+Screen

Similar Messages

How to set a background image to fill the entire screen on any device in a spark mobile application

Hi,
I started developing a mobile application with Flex.
I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio, just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
Can you please tell me how can i achieve this?
Kind regards,
Dan

Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
C

How to change background images in s:application

hello!
i want to make a webside by flex4 as this web http://www.templatemonster.com/flash-cms-templates/29930.html
But i don't know how to make change background images by click and make sound when load page.
Can u help me ,please. sorry i write E not well.
Thanks so much
BUI THI PHUONG THANH- FROM VIETNAM

Hi,
please create a sink for your application inside that put your image.And apply that skin to your application on any click.
Below is the code.
Main Application
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                this.setStyle("skinClass", MySkinClass);
        ]]>
    </fx:Script>
    <s:Button label="Change BackGroundImage" click="btn_click(event);"/>
</s:Application>
MySkinClass
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Metadata>
        [HostComponent("spark.components.supportClasses.SkinnableComponent")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="@Embed('image1.jpg')" smooth="true" left="0" right="0" top="0" bottom="0" />
</s:Skin>
with Regards,
Shardul Singh Bartwal

Could not apply background image to the panel group layout in spaces application

I tried to apply background image to the panel group layout with css class and also with inline style such as below
background-image:url('/content/conn/intra-dot-content/path/mywebcenter/lever/backgroundmain.jpg');background-position:center; background-repeat:repeat-y;
The background image does not show up. but it work with panel border layout. Is there any work around for the issue

You can try styleclass, which is always better choice than inlinestyle
page:
<af:panelGroupLayout id="pgl30"
                                   styleClass="testPGbackground">
                <af:outputText value="outputText5" id="ot8"/>
              </af:panelGroupLayout>
css:
.testPGbackground {
    background-image:url('/images/unselectedTabStart.png');
It works for me.
I tried with inline style also and it worked.
bac
<af:panelGroupLayout id="pgl30"
                                   inlineStyle="background-image: url(/incview/images/unselectedTabStart.png);">
                <af:outputText value="outputText5" id="ot8"/>
              </af:panelGroupLayout>
NOTE: You need to mention image url with context-name here, which could be a way of hard coding context name and in future it could be very difficult to change contextname. As recommended styleclass is better solution.
Thanks
Sanjeev

How to specify relative path for background image in xsl

Hi,
I am generating a PDF from Apcahe FOP. I have an xsl for that, in the xsl fo:block I am displaying a background image. When the image path is absolute like..C:\image\logo.png it works fine. But I want to have the image in my WebContent\images folder and my xsl file is in WebContent\xsls folder. So when I try giving the relative path as ../images/logo.png, the image is not displayed.
Can anyone tell how to do this???
Thanks,
Sanjeev.

I have a fo:block like this :
<fo:block border-style="solid" border-width="0.2pt" text-align="left"
                         background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
                         font-size="8pt" font-weight="bold" color="white" padding-top="1pt"
                         padding-bottom="1pt">
                         <xsl:value-of select="tr/td/span" />
                    </fo:block>In the above code you can see that the the background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
has been given as absolute. The images folder is in my WebContent directory. I want this path to be relative to the context of my application , something like background-image="url('../images/table_header_center.png')".
Thanks.
sanjeev.

In linux, saving a background image (set as Desktop)feature doesnt download my image to wallpaper folder..or even to standard "Save download" feature. Can I tell firefox where (what folder) to save my "Set as Desktop" picture?

When I find a suitable picture to use as wallpaper" I often right click and use the menu item "Set as Desktop Background". The file ""example.jpg" is saved in directory\folder "/home/user" rather than for example "/home/user/my wallpaper" or in the directory
"/home/user/Downloads". The latter as being set under the "Downloads" section on the "General" tab in the "Preferences" dialog box.
Is there a configuration file where I can change the default location to save my "Set as Desktop Background" images. Or better still can the menu be customized to launch the application that allows me to set my desktop wallpapers?
I am using the "PCLinuxOS" Linux OS but I have encountered this issue in many if not all the Linux distributions I have sampled.

Don't use "Set as Desktop". Use ''' "Save Image As..." ''' instead, and file it with your other "wallpaper" images so the operating system has access to those images.
IIRC, Firefox saves a "desktop image" to the Profile folder, and it will only save one image, at that. Change the image and the previous one is gone.

Problems to add a background-image to the widget Spry MenuBar!

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.

For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 116px;
    float: left;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 116px;
    position: absolute;
    left: -1000em;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
Then when you apply style rules to
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben

Background image on Interactive report column

Hi,
I have had a request from a customer with regards to displaying a background image behind a column on an interactive report.
The interactive report is used to show notes added for an individual in the application.
They want to display a note image behind the text to make the note stand out better.
Is it possible to add a background image to the each cell in the interactive report
Thanks
Kevin
Edited by: Cod'ead on Nov 30, 2009 3:43 PM

Take a look at this list of threads (You may find something that helps..) : Oracle Application Express (APEX)
Thank you,
Tony Miller
Webster, TX

How can I use a refrence background image ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

Perhaps I need to explain my specific application. I have 120 images that are part of a time lapse sequence. The camera is photographing a meteor shower. I was able to capture a meteor which left a persistent trail that lasted about 5 minutes. Because the camera is on a tripod, the stars are constantly moving and in fact moved quite a bit during the 5 minutes the trail was visible. These images are of much higher resulution than the 1080 video I am producing. I have used premier to track the spot in the images and show the meteor and trail as a video close up that runs at about 15% speed. because the exposures were 30 seconds ;long, every 33 seconds, the sky has visibly moved from image to image. because I use only a few keyframes Premier tracks the spot smoothly. But since the pictures are each moved, not moving, the stars in the final video move back and forth with each image. they never go anywhere, but this movement is distracting and annoying. Theoretically I could eliminate this movement by having a different key for each frame. But the better way is to prepare the images so they are all aligned. Then there will be no movement at all.
You have seen this effect in documentaries. Here's a hypothetical situation. Someone has handheld video of an important event happening. because of the situation and the handheld camera, the picture moves around like crazy. To be able to view the event clearly as part of an investigation, each frame is aligned to the first so the subject doesn't move at all, while the image frame moves all around. I have seen this many times. Now I need to do it.
I have 120 pictures which all must be aligned so the stars in the picture do not move. i need to see a refrence image through the image to be adjusted, so I can move the image to be adjusted until its stars are perfectly aligned with stars in the refrence image. Of course this is like stacking, which is used to reduce noise and increase detail. but I don't want to stack the images, just adjust them horizontally and vertically, and then save them in their adjusted state.

How to set a background image in Web dynpro for Java?

Hi,
Experts,
As i want to set a background image in my application can u please suggest how to get background image. send any sample scenarios.
Thanks in advance,
Shabeer ahmed

Hi,
I don't think it can be done in WDJ.
Maybe something can be done on the portal end.
Refer to http://help.sap.com/saphelp_nw70/helpdata/en/79/affe402a5ff223e10000000a155106/frameset.htm
Changing the theme can help maybe but I do not know how to go about that
Regards,
Himanshu

How to load a background Image on a JDialog object

Hi All, Actually i am new to java programing and i am stuck in this problem. I am developing a java application which is dialog based (using JDialog objects) and i want to load a background image on my dialog. I hope this could be done and i really appreciate your help because i must deliver this project and this is a user interface requirement.

Try something along the lines of this: Create a new class called BackgroundImagePanel and have it extend JPanel.
Have an attribute in the class for your image, and a method to set it.
Override isOpaque() to return true.
Override the paintComponenet method as such:
public void paintComponent (Graphics g) {
super.paintComponent(g);
if( image == null ) return;
Icon icon = new ImageIcon(image);
icon.paintIcon(this, g, x, y);
Add this panel to your JDialog and then add other component to this panel.
You might have to tweak this a bit, but it should get you close...
Bill

How to insert a background image in VGroup in Flex Mobile

I want to insert a background image for this VGroup. Help me out. I'm new to Flex !!
I'm using this code in Flex Mobile Application
<s:VGroup height="100%" width="100%"
          paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
    <s:List id="homeList" height="100%"
            labelField="title"
            dataProvider="{homeNews}">
        <s:layout>
            <s:TileLayout requestedColumnCount="1"
                          verticalGap="5"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:VGroup>
                        <s:BitmapImage source="{data.source}"/>
                        <s:Label text="{data.title}" />
                    </s:VGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:VGroup>

I don't think you can add a background image to a VGroup directly, nor can VGroup be skinned.
As far as I am aware there are probably 2 solutions
1) use a SkinnableContainer instead skin the container to have a background image and set its layout to VerticalLayout
2) enclose the VGroup in a Group with a BasicLayout. you can then add a background image to the Group and overlay the VGroup

How to use background image in ABAP - webdynpro

Hi,
My requirement is like that.
I want to display a background image. Over the background image i want to display my ALV list or report.
How to display my personalized image in background.
Please assist me....
Thanks in Adv.

hi ,
this is not possible:
refer these threads :
Background Image
I Assign Background Image to a Group (Ans by Thomas)
Image as Background Image possible?
as correctly pointed above and in this thread
use your own stylesheets
refer this thread for more information on styles :
EP 7 Portal stylesheet with WD ABAP
to display image in the foreground :
refer this WIKI
https://wiki.sdn.sap.com/wiki/display/stage/DisplayEmployeeImageinABAPWebDynpro+Application
regards,
amit

How to Change log in background image without third party apps on Mountain lion

Hi I am trying to change the log in screen without using a third party app on OSX 10.8. every time I use Loginox the background image changes but if i create an image of that volume and reimage another mac with a different screen size the background becomes in tile mode. Does anyone know how to replace the log in background without the third party app?Thank you for the help.

Without third party application, you can not change the login screen linen background.
Best.

Can't get rid of background image of toolbar buttons

I am just a front-end developer and responsible for the front-end look of an ADF application that we are creating: We are using jDeveloper 11.1.1.4.0 (and we cannot upgrade due to being told no...so I cannot USE the skin editor which when I tried to use, migrates the files).
I have created the necessary directories and files per tutorials I have been reading up on...
skins directory - (new directory)
skin.css (new file)
Web-Inf -
trinidad-skins.xml (new file and correctly configured)
trinidad-config.xml (existing file but updated to use the new skin)
Within the trinidad-skins.xml file I have the the new skin specified and is extending the "fusionFx-v1.desktop" default theme being used.
Now the problem... I cannot get the background images to be overwritten or disabled for af|toolbar::item within the .css file
I have looked up information about how to overwrite this and I tried to use the
-tr-inhibit: background-image; within the .css declaration like this
<code>
af|toolbar::item {
-tr-inhibit: background-image;
</code>
That was unsuccessful. I even just tried standard background {none;} and that was a no go as wel.
What am I doing wrong here? This is driving me nuts... they made this skinning stuff way too complicated IMO. I don't see why I can't just add a class to the component within the property inspector of that component and then be able to reference it via normal css conventions... but nope BREAKS grrr... And I'm advanced level CSS coder! This stuff has me absolutely clueless and ready to just quit!
Any suggestions or help is appreciated! And again... I cannot use the skin editor! Everytime I tried to, it prompted me to migrate the application and I cannot do this since there are about 5 other developers working on this application (we use clearcase for version control).
Thanks,
Michael

I can't use the stand alone skin editor since it will want me to migrate the project files (developed in 11.1.1.4) and all files are source controlled via ClearCase.
I have been experimenting...This is the code on the .jspx page
<code>
<af:panelGroupLayout id="header" styleClass="headerParent">
<af:panelGroupLayout id="topLinkBar" layout="horizontal" styleClass="topLinkBar AFStretchWidth">
<af:outputLabel value="#{customeradminportalviewcontrollerBundle.CUSTOMER_ACCOUNT}" styleClass="customerLabel"/>
<af:outputText value="outputText2012" styleClass="customerOutput"/>
<af:toolbox id="topLinkToolBox" styleClass="topLinkToolBox">
<af:toolbar id="topLinkToolBar" styleClass="topLinkToolBar">
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.HELP}" id="ctb2"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.POWER_INVOICE}" id="ctb1"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.CONTRACT}" id="ctb3"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.SIGNOUT}" id="ctb4"/>
</af:toolbar>
</af:toolbox>
</af:panelGroupLayout>
</af:panelGroupLayout>
</code>
Here is the CSS code
<code>
#topLinkToolBar af|commandToolbarButton {
background-image: none;
background-color: transparent;
border: 0;
</code>
That WILL NOT get rid of the background images on the buttons! However if I do the !important hack within the CSS like this:
<code>
#topLinkToolBar af|commandToolbarButton {
background-image: none!important;
background-color: transparent!important;
border: 0!important;
</code>
Then BOOM it works... I do NOT want to use the !important hack since that will cause problems in CSS inheritance and cascading...
What am I doing wrong?
Also how do I (if possible) target a specific ID used? For example the af:toolbar has an ID of "topLinkToolBar" how can I target that within the CSS? I know I can target it via class attribute like this:
<code>
af:toolbar.topLinkToolBar
</code>
but how would I do the same if I wanted to only apply to a component with a particular ID?
Thank you everyone for all your patience, suggestions and help with this... I'm totally new to this type of environment and it's been a slow and frustrating learning experience!
Michael

Application Background Image ?

Similar Messages

Maybe you are looking for