WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 2 months ago

#26386 new enhancement

Add fixed full screen background option to custom backgrounds

Reported by: shelob9 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

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.
  1. Use that new function in _custom_background_cb()
  1. Use that new function in custom_background::admin_page()
  1. Create a full screen option in the custom background options in the admin page.
  1. 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.

Attachments (3)

full-screen-bg.diff (4.1 KB) - added by shelob9 18 months ago.
26386.2.diff (744 bytes) - added by Shelob9 16 months ago.
Adds a filter to _custom_background_cb() to override $style
26386.3.diff (4.9 KB) - added by hennell 6 months ago.
Add background size option to customizer & custom background options.

Download all attachments as: .zip

Change History (17)

@shelob918 months ago

comment:1 @shelob918 months ago

  • Keywords has-patch ui-feedback 2nd-opinion added

comment:2 @shelob918 months ago

  • Keywords 2nd-opinion removed

comment:3 @dreamwhisper18 months ago

  • Cc dreamwhisper added

comment:4 follow-up: @nacin17 months ago

  • Component changed from General to Appearance

obenland?

comment:5 in reply to: ↑ 4 @obenland16 months ago

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.

comment:6 @obenland16 months ago

  • Focuses ui added

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.

comment:7 @Shelob916 months ago

@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.

comment:8 @celloexpressions16 months ago

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.

comment:9 @helen16 months ago

  • Keywords ui-feedback removed

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?

comment:10 @Shelob916 months ago

@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.

@Shelob916 months ago

Adds a filter to _custom_background_cb() to override $style

comment:11 @Shelob916 months ago

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.

Last edited 16 months ago by helen (previous) (diff)

comment:12 @Shelob916 months ago

Last edited 16 months ago by Shelob9 (previous) (diff)

comment:13 @hennell6 months ago

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.

@hennell6 months ago

Add background size option to customizer & custom background options.

comment:14 @ToBeFree2 months ago

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.

Note: See TracTickets for help on using tickets.