I currently have a jumbotron image in the background, but it isn't as responsive and I'm struggling to get the whole image to display properly. Here is what it looks like currently:
https://i.sstatic.net/IpuDi.png
Here is the full image for reference:
https://i.sstatic.net/wdPCQ.jpg
Below is the HTML code for the jumbotron section:
<div class="jumbotron">
<div class="row">
<div class="col-md-7 banner">
<h2><span class="text-red">Lyfe</span></h2>
</div>
</div>
<%= form_tag search_path, method: :get do %>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<%= text_field_tag :search, params[:search], placeholder: " Enter Delivery Address", class: "form-control text-center", id: "autohome" %>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-md-offset-4 col-md-4">
<%= submit_tag "Search", class: "btn btn-normal btn-block" %>
</div>
</div>
<% end %>
</div>
And here is the corresponding CSS code:
.jumbotron {
background-image: url(IMG-1373.JPG);
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
width: 130%;
right: 121px;
}