Fx-background-image and rounded borders

Hi,
I am trying to use a simple image as background image for an HBox through repetition, but I have found a problem. The HBox has got rounded borders (using fx-background-radius) and when I set the background image with fx-background-image it does not fit the real borders of the HBox and it appears painted outside the limits.
The css code is the following:
-fx-background-radius: 0 0 30 30;
-fx-background-image:url('image1.png');
-fx-border-radius: 0 0 30 30;
-fx-border-width:0 2 2 2;
-fx-border-color:#D9D9D9 #D9D9D9 #D9D9D9 #D9D9D9;
-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.35) , 20.13095238095238,0.5 , 0 , 18 ); Is this the expected behaviour? If a try it with background-color, it adjusts perfectly to the rounded borders. Should I set another property? (I have tried with fx-background-size and fx-background-repeat and fx-background-position but with no result)
Thanks in advance.
Regards.

This probably is expected behaviour.
The properties for background fills (color, insets, radius) donot work together with the properties for background images (image, position, repeat, size). They are separate and painted in separate passes in order, quote from the CSS doc below:
>
Each Region consists of several layers, painted from bottom to top, in this order:
background fills
background images
contents
border strokes
border images

Similar Messages

SCOM 2012 R2 RU 2 Topology widgets Background image and Nod visualization is missing

After Updating RU 2 in System center OM 2012 R2 no background image and Nod visualization missing in Topology widgets ?
Santosh Dharamsale

You will need to Import the MP Microsoft.SystemCenter.Visualization.Library.mpb.
For more info., You can refer below link
http://thoughtsonopsmgr.blogspot.com/2014/04/update-rollup-2-for-scom-2012-r2.html
Please remember, if you see a post that helped you please click "Vote As Helpful" and if it answered your question, please click "Mark As Answer"
Mai Ali | My blog: Technical | Twitter:
Mai Ali

Background images and color

What instance would background image and background colors
not show in a browser? (All other images are fine)

Cosmic rays.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:gbu845$7gd$[email protected]..
>A color specification without the required octothorpe
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "TC2112" <[email protected]> wrote in message
> news:gbu7sb$782$[email protected]..
>> Hello,
>>
>> Some examples would be incorrect CSS, an incorrect
link to a CSS
>> stylesheet, another element with a background color
"on top" of the
>> background blocking it, an incorrect path to the
image....
>>
>> The answer is in the code.
>> Do you have a link you could post?
>>
>> Take care,
>> Tim
>>
>> "TaraLeigh" <[email protected]>
wrote in message
>> news:gbu7bj$6hs$[email protected]..
>>> What instance would background image and
background colors not show in a
>>> browser? (All other images are fine)
>>
>>
>

How is it possible to adjust the background images and the text in Mail?

How is it possible to adjust the background images and the text in Mail?

Here's the solution I used to solve the same problem. If you're not comfortable editing the source files, this might be more than you want to take on--but I've done it to several files with no ill effects. You can follow the instructions on this page and the referenced original post from (he includes a link on the page). Good luck! He's got some great tips on some of his other pages.
http://photo.rwboyer.com/2010/03/15/aperture-3-book-theme-trick/
A warning about editing the Master pages--it only edits them in that book--it doesn't update the theme. So if you go to create another book with those same layouts, you'll have to duplicate the book and replace all the images. An alternative would be to create a "clean" book with no photos in it and then just use that as a starting point each time.

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

How do I center my background image and get a round border radius?


body {
background-color: rgba(30,30,30,1);
background-image: url('images/me_atsunsetbackground1.JPG');
background-repeat: no-repeat;
background-position: center;
background-border-radius: 100%;
position: fixed;
margin-top: 250px;

That doesn't surprise me, that code wasn't meant to be a direct replacement for yours, it's just there to illustrate an idea for Nancy.
The <body> tag itself should not be changed in that manner because the <body> holds ALL of your site's visual elements. If you were to change the <body> in the way you are attempting (which isn't possible), everything in your site would need to be within that oval.
If you just want an oval background image on the <body>, turn the image itself into an oval in Photoshop and outside the oval, either use the same color as the <body> background-color, or leave it transparent and save it as a .png with transparency.
Your inset shadow css is badly malformed...
1. The attribute "shadow" doesn't exist. You're looking for CSS3 box-shadow.
2. Safari and DW need the -webkit- prefix to display it (again, you need to test in more than one browser)
3. The settings need to be in the correct order: h-shadow, v-shadow, blur, spread, inset (something like box-shadow:10px 10px 5px 5px rgba(255, 255, 255, .5) inset;
Keep in mind, css3 settings (like rgba color settings and box-shadow in its entirety) don't work in IE8 and lower at all, and are pretty spotty in IE9.

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

Match Background Image and Browser Image

Hello,
I am using a background image that I created for my page background. I would like it to be the same image for the browser background as well vs. the solid color option.
I've attached the same image and when it is live, the color is off (it's a gray image with a texture treatment). So, it looks like a box and then another box.
Anyway to get around this? Should I resize? Can I make the background image bleed so it takes over the browser background?
I tried making the page size large, but then on screen, the scroll bar made everything of center.
Help please!
Thanks!

Have you tried setting your page background to none?
If you do this you will only see the browser background (with your image on it) when published.
David

No background images and missing styles - everything white

somehow every page on firefox displays white with no style or background images. I thought it might have been something having to do with firebug or developer plugin, so I disabled them both, upgraded to the latest firefox version and STILL I have a white screen.

I appreciate the response. I checked the settingx you suggested and everything was correct.
I'm on a mac. Below is the shot of the firefox post we're in right now.
http://calproject.com/firefox/screen-shot-firefox-page.png
So this is not a specific site - its ALL sites... As you can see.... all images and color are missing.
Thanks!

Background image and buttons

I got 4 different images. I want to use these images as a background.
They have to change as soon as the buttons is clicked. I got four buttons.
Name of the pichtures image1.jpg etc
the buttons btn1 etc
I think its possible but i dont know how to work with backgrounds

ok, that is a start, but as i said im not a real flash user and creater.
So im gonna need some extra help,
You might remember kglad that you helped me before. if not I'll post the script.
import fl.transitions.Tween;
import fl.transitions.easing.*;
var bar1s:Number = 73.05;
var bar1e:Number = 665;
var bar2s:Number = 37.85;
var bar2e:Number = 630;
var bar3s:Number = 1.6;
var bar3e:Number = 595;
var time:Number = 2;
trace("bar 1 start" + tweenRight11 +" start "+ bar2s +" end "+ bar2e);
trace ("The X position of myBox_mc is "+ bar2.x);
bar1.addEventListener(MouseEvent.CLICK, movebar1);
var tweenRight11:Tween;
var tweenLeft11:Tween;
var tweenLeft12:Tween;
var tweenLeft13:Tween;
var tweenLeft14:Tween;
var tweenLeft15:Tween;
var tweenLeft16:Tween;
function movebar1(e:MouseEvent):void{
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1s)< 2)){
     tweenRight11 = new Tween(bar1, "x", Strong.easeOut, bar1s, bar1e, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft11 = new Tween(bar1, "x", Strong.easeOut, bar1e, bar1s, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft12 = new Tween(bar1, "x", Strong.easeOut, bar1e, bar1s, time, true);
     tweenLeft13 = new Tween(bar2, "x", Strong.easeOut, bar2e, bar2s, time, true);
     if ((Math.abs(bar3.x-bar3e)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft14 = new Tween(bar1, "x", Strong.easeOut, bar1e, bar1s, time, true);
     tweenLeft15 = new Tween(bar2, "x", Strong.easeOut, bar2e, bar2s, time, true);
     tweenLeft16 = new Tween(bar3, "x", Strong.easeOut, bar3e, bar3s, time, true);
bar2.addEventListener(MouseEvent.CLICK, movebar2);
var tweenRight21:Tween;
var tweenRight22:Tween;
var tweenRight23:Tween;
var tweenLeft21:Tween;
var tweenLeft22:Tween;
var tweenLeft23:Tween;
function movebar2(e:MouseEvent):void{
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1s)< 2)){
     tweenRight21 = new Tween(bar1, "x", Strong.easeOut, bar1s, bar1e, time, true);
    tweenRight22 = new Tween(bar2, "x", Strong.easeOut, bar2s, bar2e, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
    tweenRight23 = new Tween(bar2, "x", Strong.easeOut, bar2s, bar2e, time, true);
     if ((Math.abs(bar3.x-bar3e)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft21 = new Tween(bar2, "x", Strong.easeOut, bar2e, bar2s, time, true);
     tweenLeft22 = new Tween(bar3, "x", Strong.easeOut, bar3e, bar3s, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft23 = new Tween(bar2, "x", Strong.easeOut, bar2e, bar2s, time, true);
bar3.addEventListener(MouseEvent.CLICK, movebar3);
var tweenRight31:Tween;
var tweenRight32:Tween;
var tweenRight33:Tween;
var tweenRight34:Tween;
var tweenRight35:Tween;
var tweenRight36:Tween;
var tweenLeft31:Tween;
function movebar3(e:MouseEvent):void{
     trace(bar3.x,bar3s,bar3e,":",bar2.x,bar2s,bar2e,":",bar1.x,bar1s,bar1e);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1s)< 2)){
     tweenRight31 = new Tween(bar1, "x", Strong.easeOut, bar1s, bar1e, time, true);
    tweenRight32 = new Tween(bar2, "x", Strong.easeOut, bar2s, bar2e, time, true);
     tweenRight33 = new Tween(bar3, "x", Strong.easeOut, bar3s, bar3e, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2s)< 2) && (Math.abs(bar1.x-bar1e)< 2)) {
     tweenRight34 = new Tween(bar2, "x", Strong.easeOut, bar2s, bar2e, time, true);
     tweenRight35 = new Tween(bar3, "x", Strong.easeOut, bar3s, bar3e, time, true);
     if ((Math.abs(bar3.x-bar3s)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenRight36 = new Tween(bar3, "x", Strong.easeOut, bar3s, bar3e, time, true);
     if ((Math.abs(bar3.x-bar3e)<2) && (Math.abs(bar2.x-bar2e)< 2) && (Math.abs(bar1.x-bar1e)< 2)){
     tweenLeft31 = new Tween(bar3, "x", Strong.easeOut, bar3e, bar3s, time, true);
You see that the button is the bar and slides, that is all working and tested real good. Now that is the bar is clicked and that will move the bar but it will have to change the background
what do you think

Background image and CSS?

I am building a page to resemble our companies website. Right now my page is linking to some external images. I think this maybe affecting how my background looks. If you look at this link: http://www.ournewspace.com/melanieshefchik
You will see a big grey box behind my body and if you look even further you will see a green box pattern behind that. I would like that green pattern to be the entire background. How can I get rid of that grey?
Thanks.

The grey you are seeing is in the actual images. You would ned to remove the gray from the images in order for the grey to not appear.

Why are the printed image and its borders different than specified on Aperture's Print window

Hi,
I am trying to print an 11.98x17.97 image on a 13x19 sheet. I specify .51" borders top and bottom, and .52" right and left.
Instead, I am getting a 7.5x10.75" printed image with L 1 1/8" + R 7 1/8" borders and T 1/8" + B 5 3/8" borders. In short, a smaller image, shoved up and left on the sheet. Please see screen shot below.
Same happened when I tried to print a 4x6 image on an 8.5x11 sheet, until I was told by Kirby to enter the sheet size as a standard 'letter size' sheet instead of entering a custom 8.5x11" size. Is this the same? If so, what's the 'standard' size for 13"x19"?
Something is going over my head here . HELP!
RAPHAEL

For the Epson 3880, I use the Paper Size "Super A3 / B 13 x 19 in (Manual — Rear)" when using Epson's 13x19" Hot Press or Cold Press paper.
That's from my response to you on November 16th. .
That should allow you to print as you want. I have a hunch about what might be happening with your current print setting, but I want to check it before speculating aloud.

Can't Change Lock Screen Background Image and User Account Picture in Windows 8.1.

I am running Windows8.1 Single Language with windows activated. Upgraded from Window 8 to Windows 8.1.
Lenovo Y410p.
4th generation Intel® Core™ i7-4700MQ (2.40GHz 1600MHz 6MB) with 16GB RAM.
NVIDIA® GeForce® GT750M 2GB .
I tried all methods that I found on web included :
1. http://www.askvg.com/fix-cant-change-lock-screen-background-and-user-account-picture-in-windows-8/
2. http://answers.microsoft.com/en-us/windows/forum/windows8_1-desktop/lockscreen-issues-on-windows-81/c51f570a-7a69-4e92-8348-3ebbed778592
3. I deleted the C:\ProgramData\Microsoft\Windows\SystemData file and folder
4. I restored the Libraries Features.
5. I run SFC / Scannow 3 times but get no error.
6. I created a new local account but the same problem shows up. (I'm using live for main account.)
Now, Please tell me what should I do, Thanks.

Hi,
First of all, please run the command slmgr.vbs /dlv
After that, check the License status if it is licensed.
Is there any error message when you couldn't change lock background or this option just grey out?
Roger Lu
TechNet Community Support

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

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.

Fx-background-image and rounded borders

Similar Messages

Maybe you are looking for