Title: Responsive background
Last modified: August 30, 2016

---

# Responsive background

 *  Resolved [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/)
 * Hi there,
 * I have added some Css in my child theme editor to give more visibility to my 
   background hompage and verytinh is ok on pc.
    However in mobile, the image is
   cut and there i a large space with no image (probably due to the height 900).
 * [http://www.xn--ignici-gxa.com/](http://www.xn--ignici-gxa.com/)
 * body.custom-background { background-position: center 10px !important;}
    .home.
   header { height: 900px;} body { background-size: 100%;}
 * Can you please recomend me how to fix this.
    Thanks in advance.

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

 *  [WhiteX3](https://wordpress.org/support/users/whitex3/)
 * (@whitex3)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488077)
 * I have the same issue. On iPhone 5S it’s just plain white: no menu, no logo. 
   This is extremely frustrating. The theme claims to be responsive.
 *  [WhiteX3](https://wordpress.org/support/users/whitex3/)
 * (@whitex3)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488080)
 * Never mind my last post: I don’t know what I did, but it’s fixed. The bg is still
   not responsive, though.
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488094)
 * Hello there,
 * Any ideas please?
    Thanks
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488095)
 * Hello,
 * You can try this CSS:
 *     ```
       body.custom-background {
           background-size: 100% 100%;
       }
       ```
   
 * Thank You
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488098)
 * Hello Thanks but it did not work
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488100)
 * Hello,
 * Please try this code.
 *     ```
       @media (max-width: 767px){
       body.custom-background {
           background-size: 100% 70%;
       }
       .home .header {
           height: 400px;
       }}
       ```
   
 * I hope it will work. If not then don’t remove code from site. Just let me know.
 * Thank You.
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488112)
 * Hello,
 * No its still not working.
 * Just in case here is all the css I have added to make sure there is no conflict,
   including your lines.
    Thanks
 * .navbar {
    background: #ffffff ; border: 0; border-radius: 0 !important; text-
   align: left; -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); box-
   shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); }
 * #main-nav {
    position: fixed; width: 100%; z-index: 1000; min-height: 750px; }#
   main-nav.fixed { position: fixed !important; top: 0; } .navbar-inverse .navbar-
   nav >li { display: inline; margin-right: 20px; margin-top: 20px; } .navbar-inverse.
   navbar-nav>li:last-child { margin-right: 0 !important; } .navbar-inverse .navbar-
   nav>li>a { color: #000000; padding: 0; line-height: 35px; } .navbar-inverse .
   main-navigation ul > li { display: inline; margin-right: 20px; margin-top: 20px;}.
   navbar-inverse .main-navigation > ul > li:last-child { margin-right: 0 !important;}.
   navbar-inverse .main-navigation > ul > li > a { color: #add8e6; padding: 0; line-
   height: 35px; } .navbar-inverse .navbar-nav ul.sub-menu { display: none; position:
   absolute; top: 100%; background:#fff; width:200px; box-shadow: 3px 3px 2px rgba(
   50, 50, 50, 0.08); } .navbar-inverse .navbar-nav ul.sub-menu { margin:0; } .navbar-
   inverse .navbar-nav ul.sub-menu ul.sub-menu{ position: absolute; left:100%; top:
   0; } .navbar-inverse .navbar-nav ul.sub-menu li { float: none; position: relative;
   list-style:none; padding:10px; } .navbar-inverse .navbar-nav ul.sub-menu li a{
   color:#404040; } .navbar-inverse .navbar-nav ul.sub-menu li:hover > a { color:#
   e96656; } .navbar-inverse .navbar-nav li:hover > ul.sub-menu { display: block;}
 * .navbar-brand {
    height: 90px; position: relative; line-height: 45px; } .current
   a { color: #e96656 !important; position: relative; outline: none; } .current:
   before { position: absolute; margin: auto; z-index: 1; content: “”; width: 75%;
   height: 2px; background: #e96656; bottom: 0px; left: 12.5%; } .navbar-inverse.
   navbar-nav>li>a:hover { color: #e96656; outline: none; } .navbar-toggle { border:
   0; background-color: #808080; margin-top: 23px; } .navbar-inverse .navbar-toggle:
   hover,.navbar-inverse .navbar-toggle:focus { background-color: #e96656; filter:
   alpha(opacity=100); opacity: 1; box-shadow: none; } .navbar-toggle.active{ background-
   color: #e96656 !important; } .navbar-toggle.collapsed{ background-color: #808080!
   important; }
 * —————————–
 * body.custom-background { background-position: center 10px !important;}
 * .home .header { height: 900px;}
 * body { background-size: 100%;}
 * ——————————
 * .vsg-map iframe { border: 3px solid; }
 * contact-form textarea {
    height: 200px; }
 * .zerif-copyright-box {
    display: none; } ——————————-
 * [@media](https://wordpress.org/support/users/media/) (max-width: 767px){
    body.
   custom-background { background-size: 100% 70%; } .home .header { height: 400px;}}
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488118)
 * Hello,
 * Please try the given code in the beginning of CSS.
    And also add “Dot” in code`
   contact-form textarea { height: 200px; }` After adding dot it will become
 *     ```
       .contact-form textarea {
       height: 200px;
       }
       ```
   
 * Also see screenshot for reference : [http://screencast.com/t/ZccfGDqiY](http://screencast.com/t/ZccfGDqiY)
   
   Thank You
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488120)
 * Hello,
 * If provided CSS
 *     ```
       @media (max-width: 767px){
       body.custom-background {
       background-size: 100% 70%;
       }
       .home .header {
       height: 400px;
       }}
       ```
   
 * don’t work then use this one
 *     ```
       @media (max-width: 767px){
       body.custom-background {
       background-size: 100% 70%!important;
       }
       .home .header {
       height: 400px!important;
       }}
       ```
   
 * Thank You.
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488126)
 * Thanks a lot for the help.
 * Its still not working 100%.
 * I have added the following line underneath your second Css code. At least now
   I see the full image But I am still having this big blank space with my mobile
   inbetween the image backgrpound and the next section (about us in my case). Either
   with mobile vertically or horizontaly.
 * [@media](https://wordpress.org/support/users/media/) (max-width: 767px){
    body.
   custom-background { background-size: 100% 70%!important; } .home .header { height:
   400px!important; }}
 * [@media](https://wordpress.org/support/users/media/) (max-width: 767px) {
    .navbar-
   brand > img { max-height: 40px; }}
 * I ahve noticed that if I reduce the height of the header from 700 (as it is currently)
   to 200, it is almost perfect.
    .home .header { height: 700px;}
 * So is there a way to get this code .home .header { height: 700px;} to apply only
   to pc, excluding mobile?
 * Thanks a lot
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488135)
 * Hello,
 * You can try this code.
 *     ```
       @media screen and (min-width: 1025px) {
       .home .header { height: 700px;}
       }
       ```
   
 * Thank You
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488137)
 * Hello Thanks again but still no change.
 * the following CSS seems to overwrite any code for [@media](https://wordpress.org/support/users/media/)
 * body.custom-background { background-position: center 1px !important;}
    .home .
   header { height: 700px;} body { background-size: 100%;}
 * From all the code you sent me, even when I change the numbers to ridiculous level,
   its not changing anything.
 * This part in particular is not having any effect:
 * .home .header {
    height: 400px!important;
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488138)
 * Also, the size of my image is 2048×1365.
 * Since I have CSS (body { background-size: 100%;}) It works a bit better with 
   a 1080×1080 image on mobile but not on pc
 *  [gouravwptech](https://wordpress.org/support/users/gouravwptech/)
 * (@gouravwptech)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488139)
 * Hello,
 * I am little confused. Please go to your child theme style.css and remove comment
   lines shown in the screenshot ([http://screencast.com/t/hTjxrieS](http://screencast.com/t/hTjxrieS)).
   And share screenshot of problematic area and also let me know in which resolution(
   viewport) you are getting problem.
 * You can share screenshot with the help of [http://imgur.com/](http://imgur.com/).
 * Thank You.
 *  Thread Starter [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * (@cyrillefay)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488140)
 * Hello tehre,
 * Yes it works.
 * First of all I had to delete those lines in my stylce.css as you just adviced.
   thanks
 * And then I used:
 * [@media](https://wordpress.org/support/users/media/) (max-width: 767px){
    body.
   custom-background { background-size: 150% !important; } .home .header { height:
   375px!important; }}
 * Many thanks for your patience

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

The topic ‘Responsive background’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/zerif-lite/1.8.5.49/screenshot.
   png)
 * Zerif Lite
 * [Support Threads](https://wordpress.org/support/theme/zerif-lite/)
 * [Active Topics](https://wordpress.org/support/theme/zerif-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/zerif-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/zerif-lite/reviews/)

## Tags

 * ["background-image"](https://wordpress.org/support/topic-tag/background-image/)

 * 15 replies
 * 3 participants
 * Last reply from: [cyrillefay](https://wordpress.org/support/users/cyrillefay/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/responsive-background-3/#post-6488140)
 * Status: resolved