Control Center: Background Image Cover/Contain

Site Background in the Control Settings Stack doesn’t behave like I expected it to (or like foundry 2).

Cover works more like contain (see screenimg) but still tiles the image horizontally. Contain doesn’t show the image but a color. Bug?

The Cover setting does in fact need to have a bit of code to specify that it should not tile. I’ll get that added in the next update. Can you share a test project file with me that replicates the problem so I can have a look at the Contain setting?

3 Likes

Heres a simple project file stripped. The container settings acts differently depending on the added content and the height of the content.

SimpleTest

The height of your content will always affect the background of the page. The background image is applied to the <body> tag. The body tag expands or contracts depending on the amount of content you place within it, just like any other tag. I honestly find it bad practice to apply an image to the background unless you’re using a tiled image. An image applied to a page, and then viewed on a mobile device like an iPhone will result in the image having to cover a very looooong vertical space. It is almost never going to look good.

I’ll take a look at this project file when I sit down at the desk this morning.

So I made a change to the code to prevent the tiling with Cover and Contain.

As for their display when no content is on the page. They seem to be working as expected here in that regards, as explained above.

My recommendation still stands – I personally wouldn’t use a background image on the <body> tag unless it were tiled. You’re not very likely to like the results on smaller devices. Sections of content with background images, basically Call to Action sections, work much better IMHO.

The tiling fix will be in the next update.

1 Like

Thanx … and the at least 20 characters :slight_smile: