How could i place a large picture as my entire background please?

[simpson7647]

hi all, title says it all, how would i go about placing a picture image as my entire prestashop homepage background?

Thanks all,

kind regards,

Ryan

[simpson7647]

bumppp, help please

[neilp123]

You'll need to edit the global.css file. Produce your image (will need to be about 1900px wide to suit all resolutions), upload it, then add it via CSS to the body tag.

[simpson7647]

thanks for the reply.

Say ive got the image and it's 1900px wide.

What am i to do now?

What tag /code etc do i edit and what do i put there?

many thanks

[neilp123]

Do you know any CSS?

[simpson7647]

Not much im afraid.

Usually people help by pasting the codes which need to be edited and showing what needs to be changed.

Any chance you can do this please?

Many thanks for your time

[neilp123]

Well its a bit difficult to do that because I don't know what theme you're using.

In your themes > themename > css folder, you should have a global.css file. Open that with a text editor and look for the body tag. It'll say something like:

body {
background: #000;
color: #fff;
}

You need to add, or replace the background parameter with:

background: transparent url(path/to/image.jpg) no-repeat 50% 0;

[simpson7647]

Thats brilliantly explained and i cant see how it wont work

Ill give it a go,

thank you very much indeed



EDIT

So Copy that code exactly with the brackets but in the brackets, add the located of the image?

thanks

[simpson7647]

hi there, i see this :

body {
    background-color: white;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    color: #5a5a5a;
    text-align: center
}
[/code

is this what i edit please?

thanks

[Andijambaque]

hi there, i see this :

body {
    background-color: white;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    color: #5a5a5a;
    text-align: center
}
[/code

is this what i edit please?

thanks
if you want to change color with JPG image,,you have to edit the script language above,,before editing you must copy the JPG file in the same folder with global .css folder,,and then change the script language like this

[code]
body {
    background-image: url(your-image.jpg);
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    color: #5a5a5a;
    text-align: center
}
[/code

but ,before editing the script,,just backup the files,to avoid an unexpected,,,hope it works

cheers

[simpson7647]

thanks for the answer.

Which code would i go with as 2 people have given me seperate answers?

many thanks all!

[neilp123]

Just edit your CSS

body { background-color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5a5a5a; text-align: center
}

and replace with

body { background: #fff url(path-to-your-image.jpg) no-repeat 50% 0; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5a5a5a; text-align: center
}

The little bit there that reads "50% 0" will center your large image, so regardless of the screen resolution, if its big enough, the user should still see the main area of the image.

[Andijambaque]

thanks for the answer.

Which code would i go with as 2 people have given me seperate answers?

many thanks all!

Just try both,,and give us feedback,,,,

[simpson7647]

hi all, thanks for the replies.

which should i try as i dont want to risk damaging my website :/

thanks