This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Background image in "Image Aligned Right" slider?

  • Creator
    Topic
  • #6814
    hareline
    Participant

    Hi Jason:

    This forum is fantastic!

    Is it possible to use CSS to put a background image in the “image align right” slider (where the colored, textured area is)? I uploaded an image and used this CSS:

    .style_slate #featured .standard-slider-wrapper .slides-wrapper {
        background-image: url("../images/style/slate/sliderarea1.jpg");
    }
    
    #featured .standard-slider-wrapper .slides-wrapper {
        background: url("../images/sliderarea1.jpg");
    }

    I put the image in both places to cover my bases, using both or either of those gives the same result.

    when I look in Firebug, the code shows as being used, but the image doesn’t show up. Am I trying to do something that isn’t possible, or is my CSS misplaced? This is the link: http://hlgtest.com/ama/

    Thanks,
    Jill

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #6824
    Jason Bobich
    Keymaster

    Hello Jill,

    Thanks! Glad to hear you like the forum.

    In CSS, when you reference any image, its path always needs to be relative to your CSS file. So, where exactly have you uploaded the image?

    For example, if you were to upload the image to the child theme here:

    /assets/images/sliderarea1.jpg

    Taking into account the CSS file is located here in the Child theme:

    /assets/css/custom.css

    Then, the path to the image from this CSS file would be:

    ../images/sliderarea1.jpg

    The ../ means you’re going back a directory, and then with images/ your’e then moving into the images directory.

    So if you have this:

    .style_slate #featured .standard-slider-wrapper .slides-wrapper {
        background-image: url("../images/sliderarea1.jpg");
    }

    It means I should see an image when I go here: http://hlgtest.com/ama/wp-content/themes/akita-child/images/sliderarea1.jpg

    #6827
    hareline
    Participant

    So here is where I admit two things: (1) I was putting it into the regular (not child) akita folder (I don’t know what I was thinking). (2) in the child theme, I have moved the custom.css out of the assets folder and into the main akita-child theme. I did that to not have to add the plug-in to be able to access it. I have done this successfully on a previous installation (changing the functions.php file accordingly).

    The image is still not showing up, even if I factor in the location of the custom.css file and use:

    .style_slate #featured .standard-slider-wrapper .slides-wrapper {
        background-image: url("../assets/images/sliderarea1.jpg");
    }

    -Jill

    #6829
    Jason Bobich
    Keymaster

    So, remember the image path is relative to the CSS file.

    And so if the image is in your Child theme at /assets/images/sliderarea1.jpg and the CSS file is located in the root directory of your child theme, then this is what you should be doing:

    See screenshot: http://www.uploadblvd.com/uploads/image_5150ec0c320e1.png

    .style_slate #featured .standard-slider-wrapper .slides-wrapper {
        background-image: url("assets/images/sliderarea1.jpg");
    }

    More info on this topic: http://css-tricks.com/quick-reminder-about-file-paths/

    #6884
    hareline
    Participant

    Aha, thank you for the screen shot and path explanation – I thought there always had to be a ../, now I know better! 🙂

    Thanks,
    Jill

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.