Add fixed full screen background option to custom backgrounds

[shelob9]

The options for custom backgrounds have become a little dated, for example: tiled image backgrounds. A good place to start in updating the functionality of custom backgrounds to fit the needs of modern web design is to enable fixed full screen backgrounds.

I think that in order to do this the following is necessary:

1. Create a function in wp-includes/theme.php to handle the CSS for fixed backgrounds to be used in _custom_background_cb() to handle front-end css and custom_background::admin_page() to handle the background preview css in the back-end.

2. Use that new function in _custom_background_cb()

3. Use that new function in custom_background::admin_page()

4. Create a full screen option in the custom background options in the admin page.

5. Create a full screen option in the custom background options in the theme customizer.

I am attaching a patch that addressed items 1-4. I don't think my patch is the actual solution for this. It doesn't address the theme customizer and I think it suggests a need to address the Background Attachment option as well. Feedback on those two aspects is especially appreciated, as well as any other feedback about my patch.

Ticket #25569, which makes a strong case for getting rid of the custom background page, is a related issue worth considering along with this.

[nacin]

obenland?

[obenland]

Replying to nacin:

obenland?

Hm, was not pinged by that. :/ Discovered it while looking for something else.

I can give the patch a run tomorrow.

[obenland]

Some thoughts:

• To cover the background, we have to set background-repeat, background-position, and background-attachment to certain values, very possibly overriding user settings.
• This will most likely cause UX issues.
• There seems to be no sustainable way to support IE8 and older. ​#, ​#. Backwards compatibility is hacky at best.

[Shelob9]

@obenland-

jQuery Backstretch supports IE8, possibly earlier, not sure. I'd be happy to make a new patch to demonstrate that. That would be my preferred solution, but would necessitate bundling backstretch with core, which is possible as Backstretch is MIT-licensed.

[celloexpressions]

Not sure that it's worth worrying much about IE8 at this point, as Windows XP will officially be EOL before WordPress 3.9 is released, and usage should drop significantly at that point.

In terms of the usability issues, maybe it's worth removing all of the currently visible options and re-building a UI that sets the necessary combinations of the options to achieve different effects. Options like background repeat, background position, and background attachment basically just expose users to CSS; users who know exactly how to configure these probably know CSS anyway and could implement them directly if specific effects are desired.

If we really want to keep the current UI conventions, we should probably just add a background size radio option. But this would be a good opportunity to replace the existing three sets of radio options with a single set featuring the most common combinations of repeat, position, attachment, and size. I'm not sure what those options would be, but full-screen fixed would certainly be one of them. For back-compat we could make the new options set values for each of the old options behind-the-scenes.

[helen]

I don't love the idea of core support for this right now, and let's definitely not do any JS stuff for back compat. That's not to say the idea can't be explored, I am just kind of wary of it.

There's another angle, I think - are there things core maybe could do to support a theme that wants to implement this?

[Shelob9]

@helen

What would make it super simple to implement full screen backgrounds from a theme or plugin, using the existing custom background settings would be a filter for the variable $style in _custom_background_cb()

In addition, the ability to add additional background options via a filter in Custom_Background::admin_page() would be helpful. That said, ticket #25569, makes a pretty good case for getting rid of the custom background admin page all together, as it's redundant to the background setting in the theme customizer.

[Shelob9]

Adds a filter to _custom_background_cb() to override $style

[Shelob9]

I uploaded a patch 26386.2.diff​ that adds the filter I was talking about. Here is example usage:

add_filter('custom_background_style', 'slug_full_screen_bg', 10, 2 );
function slug_full_screen_bg( $style, $background ) {
    if ( $background != '' ) {
        $style = "background-repeat: no-repeat; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment:fixed;background-position:center;";
        $style .= " background-image: url('$background');";
    }
    return $style;
}

This example, to be used in a theme or plugin, creates a full-screen background if an image is set in custom backgrounds, and just outputs the background-color rule and value if none is set.

[hennell]

Trying to get a user customisable full screen or tillable images in a theme I realised this issue could be relativity easily patched just by extending the existing options for the background. It's pretty much as celloexpressions said; exposing a background size radio option within the existing UI.

It would be preferable to see more user friendly terms on this whole UI but given this is a year old issue with little action maybe this quick fix could offer the functionality until the significant changes are developed?

Notes:

• Patch only offers 'Auto' (default), 'Cover' and 'Contain' options as custom percentage or size value options required more complex changes (and are far less useful).

• Using anything but 'auto' with any tile option can make for some odd effects.

• 'Cover' and 'Contain' are the CSS property names, but not exactly self-explanatory. The preview makes it somewhat obvious what they do, but it is adding yet more CSS terms to this page.

[hennell]

Add background size option to customizer & custom background options.

[ToBeFree]

This issue is now over 16 months old, and the last change was four months ago. I have only recently heard about the nice "background-size: cover;" CSS option, and I am already happily using it for my self-built simple-HTML landing page. However, for my Wordpress sites, I have always missed such a feature. When using a photo as background, it is very hard to achieve a good-looking result without "background-size: cover;". Even in Wordpress 4.1.1, I can only use a much-too-large background image to prevent tiling, and that seldom looks nice.

[celloexpressions]

Closing in favor of #22058, which now contains a comprehensive redesign of the custom background options, including the addition of a background-size option. With that in place, we could also look at ways to simplify the UI in terms of presenting (way) too many options, based on the size/aspect ratio of the selected image with more selective showing/hiding of the various options.