Changing the image behind the slider

Homepage Community Forums Legacy Theme Support Changing the image behind the slider

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3048
    Emma1202
    Customer

      I’d like to change the wrap image behind my slider like in this site: http://michaelprovenza.com.

      I apologize in advance since I’m very new to wordpress and CSS, so this may seem basic, but how would I go about it?  (my site is: http://www.jmmlifecoaching.com)

      1- I know my slider image is 960 x 350, but how big does the wrap image need to be?

      2- Do I modify this part:

       

      /* Genesis Slider Plugin

      ———————————————————— */

       

      .slider-wrap {

      background-color: #444344;

      background-image: url(images/slider-bg.png);

      background-repeat: repeat-x;

      border-bottom: 1px solid #ccc;

      }

       

      .slider-inner {

      background-image: url(images/slide-shadow.png);

      background-position: center bottom;

      background-repeat: no-repeat;

      margin: 0 auto;

      padding: 30px 0 42px !important;

      width: 960px;

      }

       

      #genesis-responsive-slider {

      background: none !important;

      border: none !important;

      margin: 0 auto;

      padding: 0 !important;

      position: relative;

      }

      Or do I modify this part since I’m using the green skin:

      }

       

      .legacy-green .slider-wrap {

      background-color: #7ab800;

      background-image: url(“images/green/slider-bg.png”);

      background-repeat: repeat-x;

      }

      3- And how do I modify it. Which line (or part of a line) do I replace with what, so that the picture will show?

      Thank you for your help.

      #3051
      Wes
      Moderator

        You would edit the .slider-wrap to change that particular background. Since you’re using a skin color, you’ll need to edit the .legacy-green .slider-wrap.

        The image in the demo is only 20px small. It only looks big because it is repeating horizontally. The other site you linked to has a static image that doesn’t repeat, and it stays in place. Their image is 2000px and then it fades into the gray background….they designed the image that way.

        #3057
        Emma1202
        Customer

          Thanks!  Once I have my static image. Do I upload it as any other picture?

          How do I edit the .legacy-green .slider-wrap. to have that picture show up?

          #3058
          Wes
          Moderator

            You would upload it to your images folder in your theme (FTP would probably be the fastest way to do this).

            Then edit the .legacy-green .slider-wrap‘s background image by replacing the one that is there with the new one you just uploaded. Example, if your image is named custom-image.png then you would replace “slider-bg.png” with custom-image.png like this –

            background-image: url(“images/green/custom-image.png”);

            #3061
            Emma1202
            Customer

              Thank you Wes!

              Emma

              #3062
              Wes
              Moderator

                You’re Welcome!

              Viewing 6 posts - 1 through 6 (of 6 total)
              • The topic ‘Changing the image behind the slider’ is closed to new replies.