align transparent div over carousel background image in bootstrap

Question

i am trying to place a transparent div over a background image. over this transparent div there is blue color div which has drop down list and icons right aligned and some caption. it's been a day and i tried different method to achieve this by giving background image to a container, using jumbotron, finally trying carousel, i want to align the contents now,

current look:

my page:

<div class="container">

// some code for nav bar and logo etc       

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        <div class="item active">
            <img src="~/img/backimage.jpg" alt="Chania">
            <div class="container">
                <div class="carousel-caption">
                    <div class="row" id="ddselect">
                        <div class="col-md-6">
                            <select name="connames">
                                <option value="America">America</option>
                                <option value="UK">UK</option>
                                <option value="China">China</option>
                                <option value="India">India</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>    

    </div>    
</div>



<div>

custom css:

.carousel .carousel-inner .item .container .carousel-caption #ddselect, .carousel .carousel-inner .item .container .carousel-caption  #ddselect{  
 background-color:#fff;  
 opacity: 0.7;  
 border: 2px solid;  
    border-radius: 5px;  
    padding-right: 800px;

padding-bottom: 250px;
}

expected output:

you can see complete view in imageur here

i am just learning how to do custom alignment in bootstrap. any help would be great.

Answer 1

stom, The code will show how you can get a div with a transparent background and place the dropdown in the div. All on top of the image in the carousel.
Here is the Fiddle.

I think this is what you are wanting to do.

<div class="item active">
        <img src="http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg"  alt="First slide image">
        <div class="col-md-6 v-center borders">
            <div>
                <select name="connames" class="bg-select">
                    <option value="America">America</option>
                    <option value="UK">UK</option>
                    <option value="China">China</option>
                    <option value="India">India</option>
                </select>
            </div>
            <h3>Some Text Here</h3>
            <p>ASome more text here.</p>
        </div>
    </div>

Added to this post
Do do these other other things you mentioned.
What I have added to the code to show you how to re position the transparent div, make the drop down a transparent background color, have the div height responsive etc.
All background color options are all transparent.
I show 2 options for ways to re position the div over the image.
1 of these options you can set the width using Bootstrap col-md-X.
The other option you can adjust the class width:40%;in the css.

One thing you now need to do.
Because the div over the image is responsive (width/height) you just need to set up some media breakpoints to adjust your font size for the text you plan to put inside these divs and adjust the % value for the div height at each breakpoint.
Because the carousel is responsive re the height as well as the width, this is why you need to control the text size and the div height too. As you will see when you resize the window.

This should give you a really good starting point from here.

Here is the new Fiddle with theses new changes.