[SOLVED] How to create full width header background

[arcnart]

I am wanting to make my header to be full width to put in a background image. I want the contents of the header: logo, cart, user login, and horizontal link menu to stay centered at the 980px default.

My shop is at www.arcnart.com/Shop   

I basically want the top to look the same as the one on www.arcnart.com

 

If I can get that done, I also want to find out how to move the user login and cart to be aligned next to each other at the top of the page.

 

Thanks in advanced for any help.

Edited September 6, 2013 by vekia (see edit history)

[arcnart]

Well I managed to get the header to be full with a background image. Although the logo went to the left and the cart and user login to the right. I think I need to put them in a div that has a margin:auto with a set width of 980px. I just can't seem to figure it out yet. If anyone could lend some help, I would appreciate it.

[theme_designer]

You can try to use absolute position for your logo, menu, etc.

[arcnart]

Well I finally figured out the full header after reading many posts and trying several things. For anyone else trying to achieve the same thing, this is what I did.
 
Edit your header.tpl which is located at    YourStoreName/themes/Yourtheme/header.tpl

      Scroll to the bottom and find the top line of this code and replace that section.

			<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
		</div>
		{/if}
			<div id="customheader" class="nostylesdefined">
<div id="page" class="container_9 clearfix">

<!-- Header -->
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_9 omega">
{$HOOK_TOP}
</div>
</div> 
			<div id="columns" class="grid_9 alpha omega clearfix">

Now edit the global.css, located at YourStoreName/themes/Yourtheme/css/global.css

Add this line to global.css preferably in the HEADER area located at line 556

#customheader {
background-image: url("http://www.YourWebsite.com/YourImage.jpg");
left: 0px;
top: 0px;
width: 100%;
z-index: 10;}

That is all. You should now have a full header with everything else at the default 980px center.

 

 

 

[vekia]

thanks for your solution

i appreciate it, im convinced that it will be helpful for other merchants here with similar expectactions

 

im going to makr this topic as [solved]

 

best regards

[lunas444]

Thanks, it was just i was looking

i can imagine with the footer is the same.