Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags
(1 edit) (+2)

Hey J.Pablo!

I have it in my backlog to get some support out there for background images. It's taking a lot longer to get together because it digs more into web design concepts in order to do it right and I just haven't had the time. But, the short version for your specific situation is:

Because of the nature of web design and varying screen width, I would recommend that if you aren't using a background pattern that just repeats across the page, you center the design of your background to work from the center of your page outward towards either edge of your screen. There are some additional tricks you can take advantage, and you can use a much smaller image if you're just trying to create a repeating pattern like horizontal strips going across the page or something like that.

Here's some general things to think about though if you want to have an image that specifically highlights the center area of the page:

The center section of the page with all your game information (the name for this section is inner_column) is 960px wide on desktop view by default.

If you upload a background image and set its alignment to Center, your background will be placed directly behind and aligned to the center of the  inner_column. This means that if your background image is 960px wide it will stay completely hidden behind that column, but if you make it wider, say 980px the center 960px of your background image will be covered by the inner_column, but you'll have 20px peeking out from behind that column on either side.

So, if you want a single centered background image (i.e. no horizontal repeat) you'll want to figure out how much of the background you want to display beyond the 960px on each side and then add that to the 960px for your total width. If you want to have 40px of the background display past either side of the inner_column, you'd take (40px*2)+960px=1040px.

Now the height of your image will depend on the type of background you have and how frequently the repeat is. The smaller and more consistent your pattern the less tall you need your background image to be. Set your background image to repeat vertically.

---

It gets a little messier when considering break points. Game Pages have 3 breakpoints: Desktop, Tablet, Mobile. You can't do much with this unless you are doing custom CSS on your page though. The 2 things to consider are that:

1) for Tablet view the inner column is 600px wide, so a lot more of your background will be displayed, and you may want to consider that when designing it.

2) For the Mobile view, as soon as your window width gets down to 600px the inner_column will fill the entire screen width and none of your background will be displayed unless you've used custom CSS to modify the breakpoint width.

For these reason, if you are trying to add a border to the inner_column, what you'll actually want to use custom CSS for those borders.

Ok, I understand, thanks for your time!