Jump to content

Background image on header (solved)

Quelet
 Share

Recommended Posts

Quelet Newbie

Quelet

Posted
Posted

Hi!

I'm trying to create a background image only for the header but I'can't do it. I've modificated the global.css with:

 

div.header {

background-image: l('../img/bckgrnd-header.jpg');

padding-bottom: 6px;

margin: 0 auto 2em;

width: 541px

}

 

but it doesn't works.

Can anyone help me?

Thanks!

Link to comment
Share on other sites
Quelet Newbie

Quelet

Posted
  • Author
Posted

Thanks, but it doesn't works.

Now I've this header:

 

{*

* 2007-2011 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2011 PrestaShop SA

* @version Release: $Revision: 9140 $

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />

<script type="text/javascript">

var baseDir = '{$content_dir}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<div id="restricted-country">

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

<div id="page">

 

<!-- Header -->

<div id="header">

<a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" 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">

 

{$HOOK_TOP}

</div>

 

</div>

 

<div id="columns">

<!-- Left -->

<div id="left_column" class="column">

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

<div id="center_column">

 

 

{/if}

 

 

and this global.css

div.header {

background-image: url('../img/bckgrnd-header.jpg');

}

 

What more I've to change?

It's my first prestashop project and I'm a bit lost.

Thanks a lot

Link to comment
Share on other sites
  • 3 years later...
HH Services Limited Newbie

HH Services Limited

Posted
Posted

Since no one answers, I will post the solution I found.

Paste this: 

#header {float:left; margin-bottom:20px; height:215px; width:100%; background-image:url(youaregreat.com/themes/default-bootstrap/img/cloud3.png);}

into the global.css file in yourtheme/css around line 235 on its own.

 

Play then with the height to match your shop...

Link to comment
Share on other sites
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...