Gobal css and background image

[ursnygg]

Hi guys,

 

Im new to this forum and will try to explain my problem quick.

Im running the site www.ursnygg.com.

I recently got the idea that I wanted to have som kind of a vintage wall in the background behind my page. This should just be on the right and left side. The page in the middle should remain white.

 

When I have finally managed to get a pic in as background (dont worry, that is not the final pic that is os the site right now) then the margins for the white site in the middle is all wrong and the background image can be seen in the search field.

 

Please visit the site now to understand what I mean.

 

Im attaching an image of how I want the site to look.

 

How should I do this? Can I somehow insert some white div tag or what?

 

Thank you in advance for the help.

[Carlsen]

Try adding the background again on the body

 

body {background:url(../img/background.jpg) top left repeat}

 

And then at global.css line 180 change the page class to this:

.page {width:910px; margin:0 auto; background:#FFF}

Edited December 12, 2012 by Carlsen (see edit history)

[ursnygg]

Try adding the background again on the body

 

body {background:url(../img/background.jpg) top left repeat}

 

And then at global.css line 180 change the page class to this:

.page {width:910px; margin:0 auto; background:#FFF}

 

 

 

You made my day! Thanks a lot man!

[ursnygg]

Try adding the background again on the body

 

body {background:url(../img/background.jpg) top left repeat}

 

And then at global.css line 180 change the page class to this:

.page {width:910px; margin:0 auto; background:#FFF}

 

I discovered another problem today.

When you have placed your products in the cart and you go to the checkout. That margin dissapears?

I guess there is another css page that you have to make some changes in, but which one and what?

[yaniv14]

try to change line 6 in "themes/matrice/css/order-opc.css" to: margin: 0 0 0 10px;

[ursnygg]

Thank you for your help YANIV14, however, there was no change trying that.

Here is a part of what the order-opc.css looks like:

 

 

body#order-opc div#center_column{

width:651px;

float:right

}

body#order-opc div#left_column{

margin top: 10px; <-------------- I changed this line to "margin: 0 0 0 10px;" I also tried Margin top: 0 0 0 10px;"

}

 

#order-opc .opc_status {

border: 1px solid #d0d3d8;

background: #D0D1D5 url('../img/form_bg.jpg') repeat-x top left;

font-size: 12px;

}

div#opc_account_choice {

width:100%

}

div#opc_invoice_address {

width:100%

}

span#invoice_address b {

color:black;

text-transform:uppercase;

font-weight:normal

}

.opc_float {

float:right;

width: 55%;

}

 

 

 

Any other suggestions?

[yaniv14]

that need to work because I tested it and its working.

make sure you clear your browser cache (ctrl+f5 - 2 times)

 

just to be clear, the problem is at the checkout page that the left column don't have any margin on the left?

change that line from: margin-top: 0; <--- which you have now to: margin: 0 0 0 10px;

 

before after

[ursnygg]

That did it,

 

Thanks a lot man!

Have a nice holiday season!

[maita5]

Ursnygg could you tell me how did you put the background only on the sides?

 

Thanks!

[Poloblack]

Ursnygg could you tell me how did you put the background only on the sides?

 

Thanks!

 

Ursnygg,

 

i'm also curious, because that type of design gives more impact on the page. can u tell us?