body.home background image – mobile

Homepage › Community Forums › Epik Theme Support › body.home background image – mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 12, 2015 at 3:41 pm #16680
    Greg P
    Customer

      Hello,

      I’ve added custom css so I could have a different background for internal pages vs home page.

      body {
      background: #fff;
      color: #000;
      font-family: ‘Merriweather’, serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.625;
      background-image: url(“/wp-content/uploads/2015/11/kitchen_inner.jpg”);
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right top;
      }

      body.home {
      background-image: url(“/wp-content/uploads/2015/11/white_kitchen_home4.jpg”);
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: left top;
      }

      I’ve also set a height on my welcome wrap:

      .welcome-wide {
      clear: both;
      margin: 30px 20px 0 20px;
      height: 500px;
      }

      My issue:

      On the iphone, the home page image is absolutely enormous (blown-up pixels). I read some posts with similar issues, but couldn’t find anything specifically related to body.home

      I’m wondering what I should add to the mobile/responsive section to fix the image size?

      Thank you in advance for the help.

      Greg

      November 13, 2015 at 9:26 am #16681
      Greg P
      Customer

        Here’s the site, if anyone is willing to help. Thanks:

        http://topnotch3.creativeresultsmarketing.com/

        November 13, 2015 at 11:15 am #16682
        Andykev
        Customer

          Change line 1468 to 100%

          .welcome-features .wrap {
    background-color: transparent;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0 10px;
    width: 100%;
}

          This replaces the fixed pixel width.
          Your picture will size properly.

          November 13, 2015 at 12:10 pm #16683
          Greg P
          Customer

            Thanks Andykev but no luck with that one – still blown-up on a kindle and iphone.

            That background image resides in the body.home css I added:

            body.home {
            background-image: url(“/wp-content/uploads/2015/11/white_kitchen_home4.jpg”);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: left top;
            }

            So I’m thinking the code needs to go somewhere in the responsive sections. Nothing has worked, but I’m sure it’s a simple fix.

            Maybe body.home isn’t the best place to add that full image. Not sure. (I also added a non-breaking space into the welcome widget and, as mentioned, gave it a set height to make this work.)

          • Author
            Posts
          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.