Title: Background image full screen using CSS
Last modified: October 31, 2019

---

# Background image full screen using CSS

 *  [Boxwell](https://wordpress.org/support/users/boxwell/)
 * (@boxwell)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/background-image-full-screen-using-css/)
 * Hello,
 * I’m using the WordPress Leatherman theme (self hosted) and have added a Background
   image using the customize feature. I want this image to fill the screen, but 
   this is not working (due to its container perhaps?).
 * I’ve used the following code, and while this displays most of the image, it depends
   on the width of the screen. I’ve tried using background:cover but this doesn’t
   show as much of the image as when I use a fixed padding amount.
 * Any ideas of the correct way I should do this?
 *     ```
       #masthead-stringr {
       	padding-bottom:650px;
       	background-position: center top!important;
       }
       ```
   
 * Thanks in advance for any help,
 * Graeme
    -  This topic was modified 6 years, 5 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
    -  This topic was modified 6 years, 5 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Moved to Fixing WordPress, this is not an Everything else WordPress
      topic
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbackground-image-full-screen-using-css%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [6 years, 5 months ago](https://wordpress.org/support/topic/background-image-full-screen-using-css/#post-12078187)
 * You’re using a commercial theme, so please use their official support channel.
   We feel they are best equipped to support their products.
 * [https://themeforest.net/item/leatherman-a-wordpress-theme-for-survival-outdoors-brands/23634676/support](https://themeforest.net/item/leatherman-a-wordpress-theme-for-survival-outdoors-brands/23634676/support)
 * **Commercial products are [not supported in these forums](https://make.wordpress.org/support/trouble/section-1-getting-started/what-is-not-supported).**
 *  [mark l chaves](https://wordpress.org/support/users/mlchaves/)
 * (@mlchaves)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/background-image-full-screen-using-css/#post-12078310)
 * Hi [@boxwell](https://wordpress.org/support/users/boxwell/) ,
 * Try `min-height: 100vh;` instead of your fixed padding.
 * You can also use **jQuery** because **VH** units may not be supported for all
   browsers yet (unfortunately).
 * Here’s a live demo using `height: 100vh;`.
 * [https://codepen.io/marklchaves/pen/NQbLEa](https://codepen.io/marklchaves/pen/NQbLEa)
 * In this demo, I have the jQuery commented out. You can play around with commenting
   out the 100vh and uncommenting the jQuery. Again, viewport units may not be be
   supported on every browser yet. I’d keep `background-size: cover;`.
 * [https://caniuse.com/#search=vh](https://caniuse.com/#search=vh)
 * Good luck!
    -  This reply was modified 6 years, 5 months ago by [mark l chaves](https://wordpress.org/support/users/mlchaves/).
      Reason: Added code escapes
    -  This reply was modified 6 years, 5 months ago by [mark l chaves](https://wordpress.org/support/users/mlchaves/).
      Reason: Added background-size cover recommendation
 *  Thread Starter [Boxwell](https://wordpress.org/support/users/boxwell/)
 * (@boxwell)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/background-image-full-screen-using-css/#post-12092527)
 * Thanks [@mlchaves](https://wordpress.org/support/users/mlchaves/), that worked
   perfectly! Much appreciated.
 * And apologies [@sterndata](https://wordpress.org/support/users/sterndata/) , 
   I’ll make sure to use the correct forum next time.
 * Best wishes,
 * Graeme

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Background image full screen using CSS’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 3 participants
 * Last reply from: [Boxwell](https://wordpress.org/support/users/boxwell/)
 * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/background-image-full-screen-using-css/#post-12092527)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics