Background image

[Yakje]

Hello,

 

I would like to add a background image to my website.

I am using prestashop 1.6.0.9 with this theme: Poultry theme

You can take a look at my site here:

http://goo.gl/Ap7Qli

 

In global.css, i found this piece of code:

body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  color: #242424;
  background: #fff; }
  body.content_only {
    background: none; }

I tried changing this line:

background: #fff;  

to this line:

background-image: url("http://localhost/themes/theme982/img/shutterstock_125275664.jpg")

Now it does show the image like this: , while i would like it to show like this: (made this in photoshop)

 

It would be appreciated, if anybody knows a way to achieve what i have invisioned. 

Edited March 6, 2015 by Yakje (see edit history)

[NemoPS]

You need to add a background color to:

 

.header-container

 

and

 

#columns

 

But you might need to pad the latter a bit

[Yakje]

Thanks alot Nemo, for the header part it worked!

Now i thought it should be the same for the footer, but i can't seem to get it right.

I added the following code for the footer:

  footer{
  background: url(../img/footer-bg.png) repeat-x;}
  .footer-container
  {background-color:#fff;} 

But as you can see the footer-bg.png does not go all the wat to the left and right.  

 

And although the colums now show the way i want it , the content-bg.png doesn't seem to be applied.

.columns-container {
  background: url(../img/content-bg.png) repeat-x left top; }

[NemoPS]

Try inspecting both the outer part of the footer and columns bg with chrome's console., right click and choose inspect element. It should tell you why rules are not being applied as you want. I suspect footer-container is the outer part anyway

[Yakje]

Got it working now, i had to use: 

background-color:#fff;

instead of

background:#fff;

Thanks for the help Nemo!