<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="contact-background-image"> <div class="ui container margin-top-30"> <form class="ui form pad-top-30 pad-bottom-30"> <h3 class="huge header inverted">Contact Us</h3> <div class="two fields"> <div class="field"> <label>First Name</label> <input type="text" name="first-name" placeholder="First Name"> </div> <div class="field"> <label>Last Name</label> <input type="text" name="last-name" placeholder="Last Name"> </div> </div> <div class="field"> <label>Leave your message here:</label> <textarea></textarea> </div> <div class="field"> <label>Message Type:</label> <div class="ui selection dropdown"> <input type="hidden" name="message-type"> <i class="dropdown icon"></i> <div class="default text">Message Type</div> <div class="menu"> <div class="item" data-value="1">Complaint</div> <div class="item" data-value="0">Query</div> </div> </div> </div> <div class="field"> <label>Email</label> <input type="email" placeholder="Email"> </div> <div class="ui submit button">Submit</div> </form> </div> </div>

.contact-background-image { background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/06/Gradient-Wallpaper.jpg"); padding: 50px 0 50px 0; }