How do I add/change a background image?

[Crystal Wizard]

I am using a clone of the bootstrap-default theme (I'm calling it Crystaline) on Prestashop 1.6.1.6

 

I would like to change the background image to one of my own, and have it static as the page scrolls down.

 

I cannot find a setting in the Theme Configurator for this.

 

I am confident at editing .php and .css, once I know where I am supposed to be editing!

 

Can anyone help please?

[Rolige]

Try this...

 

Edit the file:

/themes/THEME_NAME/css/global.css

And add this code at the end of file:

.header-container, header, .columns-container {
    background: none; }

body {
  background: url('http://wallpaperrs.com/uploads/photography/crystal-glass-wide-wallpaper-29356.jpg'); }

Clear cache!

[Crystal Wizard]

Thanks for the reply

 

Sorry, that didn't appear to do anything.

 

I also changed to url('/img/my_background.jpg') (where I have a picture, in case it was struggling to pull that remote image), to no effect.

[Rolige]

Ok, put your image in this path:

/themes/THEME_NAME/img/my_background.jpg

 

Then use this code:

.header-container, header, .columns-container {
    background: none; }


body {
  background: url(../img/my_background.jpg); }

 

And again, clear cache to see the changes, this is important point.

[Crystal Wizard]

Still no luck.

[Crystal Wizard]

Progress!

 

I have found (using Mozilla Inspect Element, rather than my favoured Chrome) that global.css (in themes/THEME-NAME/css/ ) is being over-ridden by /modules/themeconfigurator/css/theme2.css

 

I am able to alter theme2.css, but this does not feel right. Can I stop the Theme Configurator from over-riding global.css?

I have managed to reset the Theme Configurator and now it seems that my edits in global.css are working.

 

Thanks for your help! I'm sure I will be back with more questions later!

Edited June 25, 2016 by Crystal Wizard (see edit history)

[Rolige]

Could you share the URL to your site?

[Crystal Wizard]

My shop is at:

 

https://www.thecrystalwizard.co.uk/cave/index.php

 

I got it working using the remote image, but now I cannot get it to load my own image. I shall have another quick look ...

(The local image is a light pink/purple crystal effect)

 

EDIT: BINGO! Working!

 

EDIT: FYI - I used the second of your suggestions.

.header-container, header, .columns-container {
background: none; }

body {
background: url('../img/my_background.jpg');

 image loaded into /themes/THEME-NAME/img/

Edited June 25, 2016 by Crystal Wizard (see edit history)

[pinwheel]

Thank you for this helped a lot! I have a question is I may. 

 

The background I am using, is a grey scale and gets lighter as you go down the page. problem is, the image chops off and starts again half way down the page. I've search high and low how to make it a cover but cannot find one. 

 

Also, I'm trying to get an effect like this website: http://www.templatemonster.com/prestashop-themes/42977.html

 

I wanted to buy that template, but won't work on 1.6 since the template is older. They wanted 499.00 plus 100+ to upgrade their template, which they will start selling later. So i've decided to just try the layout myself. 

 

I'm wanting that background effect, but with the white around the images, so the background does not go into them. Is there a module? or css code that could help me with this? Thank you