I recently updated Wordpress, and it seems to have affected the background images on my site. I had them set to take up the whole screen, but now they show up in their actual size (which is too small to cover the screen). The css code seems intact, so I don't know how to fix this. Example: see the background image in the upper left corner of this page. It used to cover the entire background. http://twinpeaksreviews.com/episodes/ And here is the code:

body.page-id-2 { background-image:url(http://twinpeaksreviews.com/wp-content/uploads/2016/10/Episodes.jpg) !important; background-repeat:no-repeat; background-attachment:fixed; }


What version did you update to? The following has only been tested in 4.7.3 (and I never use custom backgrounds in the customizer, so I'm not sure what previous version of WP did there).

In the customizer, when you set the custom background image, there should be an "Image Size" dropdown. You probably have "Original Size" selected in this dropdown. If you change that to either "Fit to Screen" or "Full Screen" you should get what you want.

Which one you choose depends on what you want to achieve. "Fit to Screen" results in the customizer outputing background-size: contain ;, while "Full Screen" results in background-size: cover ;.

See CSS background-size Property for the difference between contain and cover.

| improve this answer | |
  • I feel kind of silly; I didn't even think about using the customize option on the dashboard. I was looking for a css solution when there was this simple answer right there. Thanks! – Claude Mar 18 '17 at 22:09
  • glade I could help – Paul 'Sparrow Hawk' Biron Mar 18 '17 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.