Bad resolution

[OCP]

Hi there,

 

I am trying to finish my store, but on front office the text like 'categories, informaton' etc.. doesn't have any background, it is so disturbing with my current background. 

I tried adding a large white box (attached) in the middle so the complete text on front office looked great and visible, when I changed the computer resolution, front office didn't look great at all, the text was outside the "box".

What can I do so front office looks great and my customers can read text without getting disturbed by the background? Check out my current webshop; www.northshop.no .. 

I want it to look something like this; http://www.planetsushi.fr/ (random prestashop website, but great outlook).

Please look at the attached photos, to see what I mean.

Sorry for bad english, I'm Norwegian.

 

Ole

[vekia]

what is the difference between these two pictures? i cant get it, srry:(

can you shed some more light on it? or just use it on your website then i will be able to test it.

[Paulito]

Good morning

 

Are you trying to add a colour or image to the left column

 

http://screencast.com/t/yAEcBzU2

 

Paul

[OCP]

Good morning, and thank you very much for replying!

 

When I created my frontoffice i created it on my current screen resolution on my computer 1600x900, and the white lines looked perfect on frontoffice. 

 

When I changed the pc screen resolution to1280x720 just to check if everything looked great, it was a mess as shown on the attached pictures.

 

As Paulito sent me the picture with the complete background, you all can see how disturbing the text will be, because there is no white in the middle to "filter" the store and background.

 

I hope I wrote the info right this time.

 

Thanks for fast reply. 

[Paulito]

Ok

 

Are you looking for something like this:

 

http://screencast.com/t/AY6IEeAo8Yr

 

Paul

[OCP]

That may work if my wish doesn't work.

 

What I mean, is that white center will automatically resize to fit each boxes on each screen resolutions.

I've tried to draw what I mean, 

 

Another solution I can use on my site, is to have background on each box as you pictured me, but what happens then to centertext, may the background be shown, or will it be white as I hope? 

 

Thanks,

[vekia]

what code you use to define this background? can you show it please?

[OCP]

what code you use to define this background? can you show it please?

Here is the code, I hope this helps;

body{

background-color: white;

font-size: 12px;

font-family:Arial, Verdana, Helvetica, Sans-Serif;

color: #222;

text-align: center;

background:url(../img/bakgrunn.jpg) no-repeat center center fixed; background-size: cover;

line-height:1.6;

}

body.content_only {

background:url(../img/bakgrunn.jpg) no-repeat center center fixed; background-size: cover;

}

[vekia]

the problem is related to background-size:cover;

this command scales the background image to be as large as possible so that the background area is completely covered by the background image.

 

so when you've got small window - image will be also small, not centered properly.

[OCP]

the problem is related to background-size:cover;

this command scales the background image to be as large as possible so that the background area is completely covered by the background image.

 

so when you've got small window - image will be also small, not centered properly.

 

Okay, thanks for the information. 

I can try to remove the cover, but what should I insert to make the background look good? 

 

Thanks.

[vekia]

if you will use center background will be all the time in the same position, it mean that white block will appear in corect size and in right place

[OCP]

if you will use center background will be all the time in the same position, it mean that white block will appear in corect size and in right place

 

Okay. So if I'm choosing to keep my current centeroption and choose backgroundcolor White on each columns , it will still end up like I mentioned at the start, the background does'nt resize. 

I want a background image, but take a look at the attachment (bg).

I tried making a background to look like this, complete background with a large white square so everything was writeable and not disturbed by the background image, but it ended up like this image (resolution 1280x720)

 

Any ideas how it can be autoscaled?

 

 

Thanks.

[OCP]

Hi there,

 

I found a solution, and I fixed it the way I allmost want. I inserted;

 

body {

font-family: Arial,Verdana,sans-serif;

font-size: 12px;

font-style: normal;

color: #000;

background: #b2120f url(../img/bakgrunn.jpg) repeat-y;

background-position: center 0;

}

 

.. BUT, how can I make the background image be a complete one, and not two? it's disturbing.

See attachment.

 

 

Thanks.

[vekia]

repeat-y means that background will be repeated in Y axis

if you don't want to use repeat, use there: no-repeat;

[OCP]

It is correct now about resolution changes, but as you can see on the attachment, the image is missing at the bottom

.

[vekia]

image height is to small, you have to use image higher than your screen resolution

[OCP]

image height is to small, you have to use image higher than your screen resolution

 

How can that be? I'm using a 1920x1080 image as background, and my screen resolution is 1600x900.

 

My current settings:

 

body {

font-family: Arial,Verdana,sans-serif;

font-size: 12px;

font-style: normal;

color: #000;

background: #b2120f url(../img/bakgrunn.jpg) no-repeat;

background-position: center 0;

}