Image in the slider

Homepage › Community Forums › Legacy Theme Support › Image in the slider

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 13, 2013 at 12:25 pm #3157
    Cove145
    Customer

      If I want to add an image in the slider wrap versus the colored image that is there now is there anything I need to do speical besides put an image link in this section?

      .slider-wrap {

          background-color: #444344;
          background-image: url(“images/slider-bg.png”);
          background-repeat: repeat-x;
          border-bottom: 1px solid #CCCCCC;

      }

      March 13, 2013 at 1:10 pm #3160
      Wes
      Moderator

        You should be able to just replace the link with your own image uploaded inside your images folder.

        March 14, 2013 at 12:52 am #3169
        Cove145
        Customer

          Wes, one more thing.  Can you look at my site?  I installed legacy today and add the slider but the format is all messed up and have never had this issue before.

          http://www.covertmortgageteam.com

          Thanks

          Kris

          March 14, 2013 at 12:42 pm #3176
          Wes
          Moderator

            You may want to check the width in your Slider Settings. If that’s not it then just create a new thread (separate from this) and will figure out what the issue is.

            March 14, 2013 at 7:18 pm #3182
            Cove145
            Customer

              OK, that was it.  In regards to the image in my first post in this thread.  I added it but the issue I see is as my screen changes the image size changes and it shows the image repeating versus fitting to the screen size.  How do I make the image adjust to the screen size?

               

              thanks

              Kris

              March 14, 2013 at 11:06 pm #3187
              Wes
              Moderator

                Since this is a background css image its probably best to just upload a larger image rather than a small one that will adjust. If you add “background: size:” your image will adjust with no problem when the browser is wide, but when its set at a smaller size the image won’t cover the entire space and it won’t look right. Which is why always recommend just adding a large image that can cover any browser size….or an image that can be repeated.

                To set it to no repeat – background-repeat: no-repeat;
                To center – background-position: center;
                Image adjustment – background-size: 100%; …or background-size: 100% 100%; – this covers the top and bottom …..or background-size: cover; <-- Recommended if you're going to go this route You can do a Google search for Responsive Css Background Images for more info on different ways to do it.

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