Tagged: Background Image, css, slider
Background image in "Image Aligned Right" slider?
-
CreatorTopic
-
March 25, 2013 at 10:52 pm #6814
hareline
ParticipantHi 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 -
CreatorTopic
-
AuthorReplies
-
March 25, 2013 at 11:43 pm #6824
Jason Bobich
KeymasterHello 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 withimages/
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
March 25, 2013 at 11:57 pm #6827hareline
ParticipantSo 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
March 26, 2013 at 12:26 am #6829Jason Bobich
KeymasterSo, 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/
March 26, 2013 at 9:58 pm #6884hareline
ParticipantAha, thank you for the screen shot and path explanation – I thought there always had to be a ../, now I know better! 🙂
Thanks,
Jill -
AuthorReplies
- The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.