Slider Background Image Size and placement

Homepage › Community Forums › Epik Theme Support › Slider Background Image Size and placement

Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 15, 2014 at 7:50 pm #12288
    mponzi
    Customer

      Could you please help me understand how to set up my slider background image so it behaves more like the image on this site? http://elenabenitoruiz.es/

      That is, the image size flexes with the browser window size, so you always see most of the width and height. I would also like to use the parallax effect, with a fixed background image and a text widget over the top.

      Here is a link to my test site: http://sandbox.inboundinfocus.com/

      The Slider area has a test image 1920x500px wide. I also have a 65px fixed header, so I’ve added a 65px top margin to the slider area. Before I set background-attachment: fixed; I could see the top and bottom edges of the background image, but not the left & right.

      When I fixed the slider background image (for parallax), the top of the background image pops up behind the header band, and I still can’t see the sides of the background.

      Hope that description isn’t too confusing. Thank you!!

      Marshall

      PS – Below is the background positioning CSS for the slider.

      .slider {

      background-image:url(http://sandbox.inboundinfocus.com/wp-content/uploads/2014/05/Slider-Layout-Test.jpg);
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      clear: both;

      }

      May 16, 2014 at 5:25 pm #12292
      mponzi
      Customer

        I believe I may have solved my own problem.

        First off, the sides of the image were getting cropped off because the aspect ratio of the image was too wide compared to the height. I found it helps to use a photo with an aspect ratio closer to how you’d like the image displayed most of time. For this case and aspect ratio of approx 2:1 works. The test image I originally tried was more like 4:1.

        As for the image getting pushed up under the fixed header, I added:

        background-position: center 65px;

        “center” sets the horizontal position. “65px” drops the image down 65px in the y direction. My header band is 65px tall. When the header position is fixed, the slider background image uses the top of the browser window for it’s top position, not the bottom of the header band.

        Here’s a link to the home page as it’s now laid out. http://sandbox.inboundinfocus.com/

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