How To Set Picture Background Around The Content?

[markos17]

There is such site:

http://slobberbeads.com.au

 

I w'd like to set one color in the backgorund of the center site with content.

Around this content would be picture. I've tried in many ways but without effect.

 

I've attached image - inside square one color, outside image with beers

http://s5.postimage.org/mdnouf9nb/background_Around.jpg

[vekia]

There is such site:

http://slobberbeads.com.au

 

I w'd like to set one color in the backgorund of the center site with content.

Around this content would be picture. I've tried in many ways but without effect.

 

I've attached image - inside square one color, outside image with beers

http://s5.postimage....ound_Around.jpg

 

you need to add background param into css classess:

 

#header_wrapper {
margin: 0 auto;
width: 1060px;
position: relative;
background: #FFF;

global.css line 49

 

and remove margin-bottom: 20px; from #header class (global.css line 39)

 

nest you must add backgrund, clear and overflow to:

margin: 0 auto;
width: 1060px;
background-color: #FFF;
clear: both;
overflow: hidden;

global.css line 24

 

 

and at least modify #footer & #footer-wrapper:

 

1) remove padding-top: 200px; from:

2) add background

 

#footer #footer_wrapper {
margin: 0 auto;
background:#FFF;
width: 1060px;
position: relative;

global.css line 920

 

EFFECT:

[markos17]

thanks a lot!

I've got still some problems with others sites, especially with product-list.tpl

Header and foot are in other color.

 

Beside, do You know how can I reduce header height?

[vekia]

of course, you can reduce it, just edit css styles of this section

[markos17]

of course, you can reduce it, just edit css styles of this section

 

I've tried to add parameter height to #header section, but in that way I've managed only make it bigger. I wasn't able to reduce it.

[vekia]

in this case you have to change margin-top:205px in :

 

.sf-menu {
float: left;
margin-top: 205px;
width: 1060px;
}

 

located in /modules/jbx_menu/css/superfish-modified.css line 14

 

you must also change this:

it mean that you must move <div id="logo"> above the <div class="sf-contener">

 

 

it's not all, you must also remove / change top: 75px; in:

 

div#logo {
left: 0;
position: absolute;
top: 75px;
width: 600px;
}

 

located in global.css line 312

[markos17]

you must also change this:

 

 

Thanks again, and respect for such patience

One more question, where Can I find code responsible for this? I've checked header.tpl, but there is only header_right and logo

[vekia]

have you got div id logo in header.tpl ? if so, move it above nearset hook

[mkb]

I found the answer lol

Edited March 9, 2013 by mkb (see edit history)

[vekia]

I found the answer lol

 

answer for which questions?

[baptistan]

Thank you Vekia, for all this awesome informations.

 

My questionsmight look like really dumb, i tried to find this global .css fileand think i found it in my current theme folder on my FTP.

 

But all the lines you are mentioning in your explanations do not match anything in my files in term of content.

 

COuld you be moreprecise on where we couldfind this css file ? thank you very much

[vekia]

its probably because you use non default template or template other than theme above, right?

it will be necessarty to provide an url to your store - without this it will be really painfull work for me to say what you need to change

[baptistan]

Thank you very much for your answer,

 

My store is at the following address: http://sportandtrips.gcfj3.fr/index.php

 

Thanks again !

 

Bap

[vekia]

thanks for the url, so you want to create the same site as http://i.imgur.com/HZX6hH4.png ? by this i mean white block under the shop body, right?

[baptistan]

Thank you for your reply Vekia,

 

No need to have a white block under the shop body, could stay this yellow ish color.

 

My main goal is to be able to put a full picture around the shop, with a little bit of the picture appearing over the top of the body.

 

(i have a huge image of landscape that i would love to be the background of the website)

 

A little bit like on this website : http://www.decathlon.co.uk/

 

but with the picture appearing a bit over the top of the body shop.

 

Thanks again !

[Frenkie]

you need to add background param into css classess:

 

#header_wrapper {
margin: 0 auto;
width: 1060px;
position: relative;
background: #FFF;

global.css line 49

 

and remove margin-bottom: 20px; from #header class (global.css line 39)

 

nest you must add backgrund, clear and overflow to:

margin: 0 auto;
width: 1060px;
background-color: #FFF;
clear: both;
overflow: hidden;

global.css line 24

 

 

and at least modify #footer & #footer-wrapper:

 

1) remove padding-top: 200px; from:

2) add background

 

#footer #footer_wrapper {
margin: 0 auto;
background:#FFF;
width: 1060px;
position: relative;

global.css line 920

 

EFFECT:

.

 

Have the same problem in prestashop 1.5.4. - current settings in default theme css:

 

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page {}

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#footer {}

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background:url(../img/bg_main.jpg);

background-size:contain;

}

body.content_only {

background: #FFFff;

}

 

please for help