# Scalable Background image +PLUS+ Centered content

**URL:** https://forum.kirupa.com/t/scalable-background-image-plus-centered-content/279525
**Category:** flash
**Created:** [January 15, 2009, 4:56pm UTC](https://forum.kirupa.com/t/scalable-background-image-plus-centered-content/279525 "2009-01-15T16:56:31Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![stevensunsunsun](https://avatars.discourse-cdn.com/v4/letter/s/a6a055/32.png) [@stevensunsunsun](https://forum.kirupa.com/u/stevensunsunsun)
#### Post date: [January 15, 2009, 4:56pm UTC](https://forum.kirupa.com/t/scalable-background-image-plus-centered-content/279525/1 "2009-01-15T16:56:31Z")

</div>

I recently found a great tutorial for making a scalable background image on:

[http://blog.fryewiles.com/design/07-14-2008/proportional-image-scaling-in-full-browser-flash](http://blog.fryewiles.com/design/07-14-2008/proportional-image-scaling-in-full-browser-flash)

…which has worked a treat. But my content is now positioned top left.

_ **How can I centre it without effecting the background???** _

The full code I’m using on the first frame is below. I can centre all the content by changing Stage.align to “T”, but then the background image has a nasty white space on the left hand side when the user resizes the browswer.

I’m a flash newbie, can do some basics, but in need of some help! (-: Thank you all in advance!!  
[INDENT]//set stage for FBF  
Stage.align = “TL”;  
Stage.scaleMode = “noScale”;

//define dynamic aspect ratios  
picHeight = new Object ();  
picHeight = pic.\_height / pic.\_width;

picWidth = new Object ();  
picWidth = pic.\_width / pic.\_height;

//conditional statement to account for various initial browser sizes and proportions  
if ((Stage.height / Stage.width) \< picHeight) {  
pic.\_width = Stage.width;  
pic.\_height = picHeight \* pic.\_width;  
} else {  
pic.\_height = Stage.height;  
pic.\_width = picWidth \* pic.\_height;  
};

//center picture on stage  
pic.\_x = Stage.width / 2;  
pic.\_y = Stage.height / 2;

// create listener  
sizeListener = new Object();

// make listener change picture size and center picture on browser resize  
sizeListener.onResize = function() {

```
if ((Stage.height / Stage.width) &lt; picHeight) {

    pic._width = Stage.width;
    pic._height = picHeight * pic._width;
} else {
    pic._height = Stage.height;
    pic._width = picWidth * pic._height;
};    

pic._x = Stage.width / 2;
pic._y = Stage.height / 2;

```

}

//add listener to stage  
Stage.addListener(sizeListener);  
[/INDENT]