Cannot fit the background fully (black bars)

Solar2D General Questions/Discussion
#1

No matter what I try. I cannot get my background image to fit the screen fully, width seems ok, but the height is a little bit off. Causing the black bars on the top and bottom. The image file is 350x570 on disk and is used in the code below:

display.setStatusBar(display.HiddenStatusBar) local background = display.newImageRect("background.png", display.contentWidth, display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY

But it still gives an output like this:

unknown.png

Any ideas?

#2

The issue is screens have different aspect ratios, a phone is tall and thin while tablets tend to be more squareish.

When you create a content area in your config.lua, you’re defining a virtual screen and it’s very likely that most every screen won’t match what you put in config.lua. Most people use something like 320x480 which is a 1.5:1 content area. Your typical phone is 1.77778:1 while your typical iPad is 1.333:1 You will always have some part of your device that’s outside of the 320x480 content area.  How you manage that is up to you, but the typical manner is that you build backgrounds that are intentionally larger than your defined content area. For instance, in the 320x480 example a background that’s 360x570 will fill the black bars on pretty much every device

If you’re doing a solid color, which your example shows, you can use display.actualContentWidth and display.actualContentHeight instead of display.contentWidth and display.contentHeight to fill the screen regardless of the device’s shape. But once your background starts containing artwork, you wouldn’t want to allow it to stretch the background.

Please note that the top, left of the screen is not 0, 0.  0, 0 is the top left of your defined content area. To get to the top, left of the screen you need to use the display.screenOriginX, display.screenOriginY.

Rob

#3

The issue is screens have different aspect ratios, a phone is tall and thin while tablets tend to be more squareish.

When you create a content area in your config.lua, you’re defining a virtual screen and it’s very likely that most every screen won’t match what you put in config.lua. Most people use something like 320x480 which is a 1.5:1 content area. Your typical phone is 1.77778:1 while your typical iPad is 1.333:1 You will always have some part of your device that’s outside of the 320x480 content area.  How you manage that is up to you, but the typical manner is that you build backgrounds that are intentionally larger than your defined content area. For instance, in the 320x480 example a background that’s 360x570 will fill the black bars on pretty much every device

If you’re doing a solid color, which your example shows, you can use display.actualContentWidth and display.actualContentHeight instead of display.contentWidth and display.contentHeight to fill the screen regardless of the device’s shape. But once your background starts containing artwork, you wouldn’t want to allow it to stretch the background.

Please note that the top, left of the screen is not 0, 0.  0, 0 is the top left of your defined content area. To get to the top, left of the screen you need to use the display.screenOriginX, display.screenOriginY.

Rob