Background picture problem

[LasseSJ]

HI.

 

I'm starting a new shop in ver. 1.54.

 

I like having a background Picture in the shop to give it some feel.

Everything Works great though there is a problem with the background, when I log in to "my account".

 

The page turns White in the bottom:

 

http://smartkajak.dk/prestashop/index.php?controller=authentication&back=my-account

 

What to do?

 

Thank you.

BR from Copenhagen

Lasse

[PascalVG]

Hi Lasse,

I see you found out already how to 'repeat' the picture. Is that what you really wanted, or do you still have other ideas what you want?

 

Pascal

[LasseSJ]

HI.

 

No, it doesn't repeat, it needs to be fixed. And I think it works like that right now.

But only when I "log in" to an account it leaves a White bottom (it's not the Picture repeated):

http://smartkajak.dk/prestashop/index.php?controller=authentication&back=my-account

 

 

In Global:

 

body{

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

color:#222;

background:#fff url('../img/dream3.jpg');

background-size: 100% auto;

 

?

[Snade]

Your problem is not the background size but the body element size. you need to make your body 100%, but to do that you need the html element to be 100%, so :

html, body
{
   height: 100%;
}

 

This fixes your store, just tested it.

 

 

Few design advices, make a new logo, this looks really bad.

Add some background below the content, it can be semi-transparent if you want to keep the accent on the sea. Currently your text is unreadable and you must fix that.

And generally, to sell such kind of product your store need to look profesional in order to build trust. Consider paying to designer to prepare the design, then you can try integrating it

 

Cheers

[LasseSJ]

Snade, thanks for the tips!

The site is not done at all. The logo is temp. I think I will get it done by a designer.

Also I need the newsletter logo and paypal logo changed.

 

Where can I find and change the height to 100%? I tried in Global, no luck.

 

How/where do I add semi-transparent below the content?

 

You're appreciated.

 

Out/Lasse

[Snade]

I dont think that height is stated for body or html. Just add the code in your global.css

 

#page {
   background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
   padding: 0 10px;
}

this is for the semi-transparent background, tbh I dont like how it looks, but its a start I guess.

 

Still, consider spending 50-100 bucks for design, or look at good relevant sites for inspiration.

Dont think that it will come together perfect with just css tweaking, because it wont. At least not until you become gosu web designer.

 

Good luck

[LasseSJ]

Hi Snade.

 

I added height: 100% in global:

 

body{

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

color:#222;

background:#fff url('../img/dream1.jpg');

background-size: 100% auto;

height: 100%;

}

It didn't make a change on the "my account" view:

http://smartkajak.dk/prestashop/index.php?controller=authentication&back=my-account

The page still turns White in the bottom.

 

I tried the semi-background, but it changed the footer color too, and made the background Picture in a different size.

 

By design, you mean get a designed logo and get the links, bottons designed so it's a Whole on the Whole site?

50-100 bucks sounds affordable for getting that.

Who would you recommend? Or is buying a theme modul enough?

 

Thank you Snade.

[Snade]

Hi,

please ready my first post where I explained very detailed why and where to pu height 100%. You need to put it on the html and body tags. So adding exactly this code anywhere in your global.css will fix your issue

html, body
{
   height: 100%;
}

 

There are many places where you can post your design request and various designers will apply, just make few google searches and you'll find the best ones.

 

Yes, buying a theme is another good option since you'll get perfectly working prestashop theme with various options and additional modules. Actually in your case this is what I recommend since as a whole it will be the cheapest and easiest way for you to get nice and working prestashop store.

Just take a look at the templates sold in prestashop addons store or themeforest and see if you like some design.

[LasseSJ]

Hi Again.

 

I'm new at this.

So I have to insert

 

height: 100%;

 

between each and one { } in global.css?

That is maybe 50 times..

 

Thanks,

Lasse

[PascalVG]

Hi Lasse,

 

No you don't have to add it 50 times. Snade tries to tell you to add the WHOLE block of 4 lines, as Snade mentioned, including html, body and the lines with { and }, exactly 1 time.

So insert ALL red coloured text somewhere in themes/<your theme folder>/css/global.css file

 

html, body

{

height: 100%;

}

 

To give you an idea where you can put it, find the following text: (around line 50)

 

 

 

 

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

generic style

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

body{

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

color:#222;

background:#fff

}

body.content_only {

background: #FFF;

}

 

and put the red block mentioned above just behind this.

 

 

Hope this makes it clear.

Pascal

[LasseSJ]

HI.

 

I got it. Finally. Thanks!

 

Now the account part looks fine, but the front page causes trouble with this change now:

http://smartkajak.dk/prestashop/index.php

Now the bottom is White here instead.

What to do?

 

If any case...

The background Picture I use is:

1543x918 jpg.

 

I hope you can help.

Thanks, Lasse

[Snade]

oh, my bad.

 

The correct usage must be min-height, so use this

html, body {
   min-height: 100%;
}

[LasseSJ]

No worries.

 

I made the change, but still doesn't the Work.

Is it really so difficult to make it Work? Would it help to resize the background image or what does it take?

 

 

Thanks in advance.

BR Lasse

[Snade]

currently it does work, your background just reapeats.

 

You can try background-attachment: fixed; in order to make it stay in one place.

[LasseSJ]

Hi Snade.

 

Like this?

 

body{

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

color:#222;

background:#fff url('../img/dream1.jpg') fixed;

html, body

{

min-height: 100%;

}

 

Going to log in to "my account", there is still a White field in the bottom:

http://smartkajak.dk/prestashop/index.php?controller=authentication&back=my-account

 

I want to make the background fixed and scroll in the center, I made a thread here:

http://www.prestashop.com/forums/topic/240572-how-to-get-background-image-fixed-in-the-two-sides-and-scroll-in-the-center/

Maybe that would kill the problem.

 

BR Lasse

[Snade]

Dude,

if the code above is what you have in global.css its wrong, you have missing }

 

and If you have, html and body min height 100%, and fixed background you'll achive what you want. Youre just messing the code.

 

I dont want to be rude, but here is not a css school.

If you have spent 10 min to read about this on the net, you would not ask these stupid questions.

 

If youre going to make your own design, first spend some time learning how to do that, or you'll end up with dozen topics like this one.

 

Wish you good luck