Bootstrap carousel - How to add IMAGE overlay on slide images?

HTML & CSS
1

Hi guys,

i really hope that somebody can help me… i am trying to add a carousel slider in my header… it works… however i have this problem that i would like to KEEP the TITLE and the HOUSE on the bottom right even if i use slide images… now when i add a slider… the HOUSE hides behind the images… i want it to be visible all the time…

Please see:
http://dev.alveos.nl/drawfactory/

So where you see the WHITE header there will go the slider… but how to keep the TITLE & house at the bottom right even if i use a slide gallery?

Thanks!!!

2

How can we possibly know what may go wrong until you implement the slider? Please give us a test page with the slider in place. You are asking us to shoot at a target 1000 feet away, while blindfolded. This is impossible. Sliders also differ in code so we can’t even give you a universal response here. There is literally nothing we can suggest unless you give us a (broken) page.

3

Hi,

I am sorry i didn’t upload my files. PLease take a look now.

So what i am trying to accomplish with z-index for example, i want the SLIDE images to BEHIND that HOUSE at the bottom right corner… so i want that house to be place OVER the image on the right side bottom.

Thanks!

4

Ah ok. We have many people come here and expect us to be psychic. Thankfully you don’t appear to be one of them. Thank you :slight_smile: .

Child elements will always be placed on top. Negative z-index won’t work here I believe. Your best bet would be to make that house it’s own element and absolutely position it near the bottom. From there, stacking context should be easy to figure out.

5

Hi,

Oke for the house… what is the best CSS code to start with since i am really confused and i don’t know how i can solve this. Since i am using this now as a background image inside the jumbotron class, how can i fix this?

Thanks :smile:

6

Inside of Jumbotron element do something like this (inline styling ONLY USED TO ILLUSTRATE HOW TO DO THIS. Please move to a class.)

<div style="position:absolute;right:0;bottom:0;width:IMAGEWIDTH;background:IMAGEURL;height:IMAGEHEIGHT;z-index:1;></div>

That should work. If it doesn’t, come back.

7

Hi Ryan,

This is a nice trick and yes you are using inline styling… but since i am using wordpress and a PHP code inside my divs i don’t think this wil be a good idea?

8

I did mention to turn that into a CSS class though.

Anywhere inside jumbrotron is fine. Post that PHP block if you are afraid. I will show where to put it.

9

Just be careful if you are going to change the code of the carousel if it is a WordPress plugin. As soon as the plugin is updated, you will lose any changes you made to it. Use classes that are already part of the original code.

10

@WebMachine @RyanReese

can somebody please take a look at my slider now. I have tried z-index: -1 an dtried working in Google chrome live editor… when i view second image it FADES and shows me the perfectly aligned background image of the house on the right bottom corner but it is for some reason not being PLACED OVER the image instead of behind it…
can somebody please give me a solution?

11

Looks like you have it set up so the house doesn’te ven overlap the slider.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.