Jump to content

Background image on header (solved)

Recommended Posts


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?


Share this post

Link to post
Share on other sites



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




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



And you need to select the div with the id 'header', if you kept the original namings and structure.

Share this post

Link to post
Share on other sites

Thanks, but it doesn't works.

Now I've this header:



* 2007-2011 PrestaShop




* 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 license@prestashop.com so we can send you a copy immediately.




* 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 <contact@prestashop.com>

* @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}">



{if isset($meta_description) AND $meta_description}

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


{if isset($meta_keywords) AND $meta_keywords}

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


<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};


{if isset($css_files)}

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

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



{if isset($js_files)}

{foreach from=$js_files item=js_uri}

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






<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 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} />



<div id="header_right">







<div id="columns">

<!-- Left -->

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




<!-- Center -->

<div id="center_column">






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

Share this post

Link to post
Share on other sites
  • 3 years later...

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...

Share this post

Link to post
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
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More