How can I make an image repeat-y the same times as another one?

[hariskar]

In my site www.mikroviologos.gr I would like the background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 0 0 transparent) I have in 3 positions (#page-wrapper, .region-sidebar-second, #content .section) to have the same height as the 1st image on the left.How would it be possible to do it?With javascript or css maybe?Could you give me any directions?Thank you!

[dsonesuk]

The background image should be placed in outer containers whose height is determined by the highest inner content, luckily you do have 3 such container elements.

#page-wrapper {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 0 0 transparent}  #page {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 0 0 transparent} #main-wrapper {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 0 0 transparent}

The first you do not need to change, so that is required is to adjust the #page and #main-wrapper first zero value so they at the correct position (guess would be 230px 0 for second, 728px 0 for the third), but you will need to remove background of #content .section { /*background-color: #ECF1F8;*/}

[hariskar]

Thank you!#main-wrapper worked great with 230px, but in #page the background image is visible even if there is no sidebar-b. How could I fix it? Edit: I did this too with:

.two-sidebars #main {background: url(/sites/default/files/field/image/hktheme/b-col-divider.png) 728px 0 repeat-y;}

Thank you!

[dsonesuk]

You would use the classes used for the body to determine when to show, or not show background image for one side bar or two sidebar template

#page-wrapper {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 0 0 transparent}#page {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 230px 0 transparent}body.two-sidebars #main-wrapper {background image (url("/sites/default/files/field/image/hktheme/b-col-divider.png") repeat-y scroll 728px 0 transparent} body.one-sidebar #main-wrapper {background: none;}

[hariskar]

dsonesuk, I edited my previous post 1 minute before your post, to tell you that I solved ths problem too. I had tried to put the background image at these positions before, but without to remove

#content .section {background-color: #ECF1F8;}

so it didn't work.Thank you again!!