Within my Ruby on Rails Spree application that utilizes the Twitter Bootstrap gem, I have the following code snippet for the header section:
<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
<%= render :partial => 'spree/shared/header' %>
(...)
</body>
The content of shared/header is as follows:
<div class="container header">
<header id="header" data-hook>
<div class="container">
<figure id="logo" class="text-center col-md-4" data-hook>
<%= logo('store/Logo.png') %>
</figure>
<%= render :partial => 'spree/shared/nav_bar' %>
<%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
</div>
</header>
</div>
The logo is currently displayed within the figure tag.
My objective is to have the logo extend downward and be part of the background. For this purpose, should I incorporate it into the background for the header and body? Or would it be better to utilize a CSS background for the entire page? In either case, how can I ensure that it scales appropriately with the page size?
I would greatly appreciate any guidance on this matter!
/edit Generated HTML:
<body class="one-col" id="default" data-hook="body">
<div class="container header">
<header id="header" data-hook>
<div class="container">
<figure id="logo" class="text-center col-md-4" data-hook>
<a href="/"><img alt="Logo" src="/assets/store/Logo-c0fd8c5c71ef79825dba0315b84bdef5.png" /></a>
</figure>
<ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
<li><a href="/account">My Account</a></li>
<li><a href="/logout">Logout</a></li>
<li id="search-bar" data-hook>
<form accept-charset="UTF-8" action="/products" class="navbar-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
...
</ul>
<nav class="col-md-12"><div id="main-nav-bar" class="navbar">
<ul class="nav nav-pills navbar-nav" data-hook>
<li id="home-link" data-hook><a href="/">Home</a></li>
<li id="shop-link" data-hook><a href="/shop">Products</a></li>
<li id="about-link" data-hook><a href="/about">About us</a></li>
<li id="contact-link" data-hook><a href="/contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-hook>
<li id="link-to-cart" data-hook><a class="cart-info empty" href="/cart"><span class='glyphicon glyphicon-shopping-cart'></span> Cart: (Empty)</a></li>
</ul>
<div id="locale-select" style="float: right; margin-right: 10px;" data-hook>
<form accept-charset="UTF-8" action="/locale/set" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mx8tcgWHDqyVslG5Fxvz6N03KRhtVtr9eXYyqDJpEhQ=" /></div><select class="form-control" data-href="/locale/set" id="locale" name="locale"><option selected="selected" value="en">English (US)</option>
<option value="nl-NL">Nederlands (NL)</option></select><noscript>
<input name="commit" type="submit" value="Save changes" />
</noscript>
</form></div>
</div>
</nav>
</div>
</header>
</div>
<div class="container row" style="margin: 0 auto;" data-hook>
<.. MAIN CONTENT>
</div>
</body>