Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page.
After trying out a few solutions, I ended up with the following:
https://i.stack.imgur.com/cimYI.png
However, as you can see, only a small portion of my div displays the Google Maps view.
This is what I attempted:
<div id="tf-contact" class="text-center" >
<div class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginwidth="0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d79109.96871665918!2d5.295447749999999!3d51.711330000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6ee37ad3edd37%3A0x400de5a8d1e7c50!2s's-Hertogenbosch!5e0!3m2!1snl!2snl!4v1410603286022"
style="border:0">
</iframe>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title center">
<h2>Feel free to <strong>get in touch</strong></h2>
<div class="line">
<hr>
</div>
<div class="clearfix"></div>
//not important for the question
</div>
<form>
//not important for the question
</form>
</div>
</div>
</div>
</div>
My desired outcome is something like this:
https://i.stack.imgur.com/HXIbz.jpg
The CSS code related to this section is:
/* Contact Section */
#tf-contact{
padding: 80px 0;
}
label {
float: left;
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
#tf-contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#tf-contact .form-control:focus {
border-color: inherit;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}
button.btn.tf-btn.btn-default {
float: right;
background: #FCAC45;
border: 0;
border-radius: 0;
padding: 10px 40px;
color: #ffffff;
text-transform: uppercase;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted;
outline: none;
}