Background image in "Image Aligned Right" slider?

[hareline]

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

Topic

[Jason Bobich]

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

[hareline]

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

[Jason Bobich]

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/

[hareline]

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

Thanks,
Jill

[Author]

Replies