CODEWITHSUNDEEP
csshtml
Blnukem
Blnukem

Reputation: 183

CSS Merge background image as one

I'm trying to merge these to cell so that it only uses one background image have been trying all day with no success. Is some one could help with is I would greatly appreciate it,

The root domain is http://amalgamite.com so you can see what I'm talking about the two images.

<!DOCTYPE html>

<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BBQ Grills & Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />
</head>

<body oncontextmenu="return false;" class="common-home"> 
 <nav id="top">
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">

      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          

      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">

        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>

        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
  </div>
</nav>

<header>
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>

Upvotes: 0

Views: 1429

Answers (3)

repzero
repzero

Reputation: 8412

extract the the header below and put it into the last div in the nav bar and set background as transparent

  <header>
  <div class="container"  style="background:transparent">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>

------SNIPPET HERE-------------------- 

<title>Bearing Depot &amp; Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />

<body oncontextmenu="return false;" class="common-home"> 
 <nav id="top">
  <div class="container"  style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
    <div class="row">
            
      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          
                              
      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">
        
        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>
        
        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
      <header>
  <div class="container"  style="background:transparent">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>
  </div>

</nav>

Upvotes: 1

Laurent Fauvel
Laurent Fauvel

Reputation: 641

Try this :

<!DOCTYPE html>

<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BBQ Grills & Supply</title>
<base href="http://amalgamite.com/" />
<meta name="description" content="BBQ Grills & Supply" />
<meta name="keywords" content= "BBQ Grills & Supply" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/Bearing Depot/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="http://amalgamite.com/" rel="canonical" />
</head>

<body oncontextmenu="return false;" class="common-home"> 


<header style="background: url(http://amalgamite.com/pics/Header-Cell-BG.png);">
<nav id="top">
  <div class="container">
    <div class="row">

      <div id="logo">
                    <a href="http://amalgamite.com/index.php?route=common/home"><div class="HeaderTextLarge">BBQ Grills & Supply</div>
          <br /><div class="HeaderTextSmall">800 Lincoln Blvd. Plainfield PA</div></a>          

      <div id="top-links" class="nav pull-right" style="clear:bolth;">
       <ul class="list-inline">

        <li><a href="http://amalgamite.com/index.php?route=information/contact"><i class="fa fa-phone fa-Top"></i></a> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">732.563.2225</span></li>

        <li class="dropdown"><a href="http://amalgamite.com/index.php?route=account/account" title="My Account" class="dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-user fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">My Account</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right HeaderTextXSmall">
                        <li><a href="http://amalgamite.com/index.php?route=account/register">Register</a></li>
            <li><a href="http://amalgamite.com/index.php?route=account/login">Login</a></li>
                      </ul>
        </li>

        <li><a href="http://amalgamite.com/index.php?route=checkout/cart" title="Shopping Cart"><i class="fa fa-shopping-cart fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Shopping Cart</span></a></li>
        <li><a href="http://amalgamite.com/index.php?route=checkout/checkout" title="Checkout"><i class="fa fa-share fa-Top"></i> <span class="hidden-xs hidden-sm hidden-md HeaderTextXSmall">Checkout</span></a></li>
      </ul>  </div>
      </div>
    </div>
  </div>
</nav>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">&nbsp;</div>
      <div class="col-sm-5"><div id="search" class="input-group">
  <input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
  </span>
</div></div>
      <div class="col-sm-3"><div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
  <ul class="dropdown-menu pull-right">
        <li>
      <p class="text-center">Your shopping cart is empty!</p>
    </li>
      </ul>
</div>
</div>
    </div>
  </div>
</header>
<div id="content">
<h2> your content here</h2>
</div>
</body>

Is it what you are trying to achieve? On a side note you should put your style in .css file.

Upvotes: 0

AGE
AGE

Reputation: 3792

You might need to work with the images themselves to have them look more closely the way you want to.

However coding wise, you can have one of the images instead of two. Apply this image to the background property of either the <body> tag, or a new <div> which wraps all the elements you wish to have the background image on.

For example, putting the background image on the <body> element only:

  1. Remove all background attributes from the .container, #top .container and #top (and anywhere else needed).
  2. Add background: url(http://amalgamite.com/pics/Header-Cell-BG.png); to your <body>.

That should help clear up the look and feel.

Disclaimer: The implementation is 100 percent up to you, get creative!

Upvotes: 0

Related Questions