Background image to fill screen

Getting Started Newbie Questions
#1

Hi Guys. 

I’m completely new to Corona SDK and Lua so please excuse the basic question. I am trying to add a background that completely  fills the screen as a background. Right now it adds the image but there is still black around the image. 

At first I thought it was the size of the image so I increased the image size but this did not make any changes. 

Heres the code: 

  local background = display.newImage("rusted\_metal10\_normal.jpg"); background.x = display.contentWidth/2;  background.y = display.contentWidth/2;   

I do I get the image to fit the screen and remove the black empty space around it still left. 

Thank you 

#2

Actually, your question isn’t as simple as it may seem :slight_smile:

First, use display.newImage Rect (image, width, height) to specify a height and width for your image. That’s the easy part.

The next thing you’re going to realize is that depending on which device you’re installing your app on, your screen width and height might be different. This is where content scaling comes in. Here’s some useful articles on that:

https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

#3

The gist of this is your background image has to be bigger than any screen it’s going to run on.  There are three of four basic screen shapes:

16:9 (typical phone today, wide screen TV)

4:3 (iPads)

3:2 (original iPhones -  iPhone 4s and some android phones)

8:5 (small Android tablets like Google Nexus 7, Kindle Fire)

The 16:9 is the widest and most narrow of the screens.  The iPad is the most square of the devices.  The 3:2’s and 8:5’s fit inside those two extremes.   If you base your screen is a 320 x 480 (Corona’s config.lua is always done in portrait mode) and you use something like the Modernizing the Config.lua tutorial to size your screen, then you want your background to be based on a 360x570 (portrait) or 570x360 (landscape).  Your @2x images would be based on a 720x1140 image and your @4x image would be 1440x2280.  There will be some of the background that will be off screen.

Rob

#4

Actually, your question isn’t as simple as it may seem :slight_smile:

First, use display.newImage Rect (image, width, height) to specify a height and width for your image. That’s the easy part.

The next thing you’re going to realize is that depending on which device you’re installing your app on, your screen width and height might be different. This is where content scaling comes in. Here’s some useful articles on that:

https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

#5

The gist of this is your background image has to be bigger than any screen it’s going to run on.  There are three of four basic screen shapes:

16:9 (typical phone today, wide screen TV)

4:3 (iPads)

3:2 (original iPhones -  iPhone 4s and some android phones)

8:5 (small Android tablets like Google Nexus 7, Kindle Fire)

The 16:9 is the widest and most narrow of the screens.  The iPad is the most square of the devices.  The 3:2’s and 8:5’s fit inside those two extremes.   If you base your screen is a 320 x 480 (Corona’s config.lua is always done in portrait mode) and you use something like the Modernizing the Config.lua tutorial to size your screen, then you want your background to be based on a 360x570 (portrait) or 570x360 (landscape).  Your @2x images would be based on a 720x1140 image and your @4x image would be 1440x2280.  There will be some of the background that will be off screen.

Rob