Header Image

[Aelanna]

Is it possible to put an image in the header instead of just a solid color? Below is my existing header, and an example of what I'd like it to look like with an image.

 

 

[dioniz]

It is possible to set background image with css.

[Aelanna]

Ok... so how is this done? Which css file needs to be modified?

[dioniz]

I would do it like this:

 

1 Open header.tpl and find this code:

<div>
	<div class="container">
		<div class="row">
			<div id="header_logo">
				<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
					<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
				</a>
			</div>
			{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
		</div>
	</div>
</div>

And give first div some class to distinguish it from other divs

 

Example (Changed just first line):

<div class="my_header_bg">
	<div class="container">
		<div class="row">
			<div id="header_logo">
				<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
					<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
				</a>
			</div>
			{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
		</div>
	</div>
</div>

Then set some class for it in global.css

.my_header_bg .container{
    background: url('path_to_your_image/header_bg.jpg') 0 0 no-repeat;
}

[Aelanna]

I'll give that a try, thanks!