5 replies [Last post]
ailo
Offline
newbie
Last seen: 13 years 1 week ago
Joined: 2009-08-10
Posts: 2
Points: 0

Hi There.
I have a styling question that i cannot find an answer for on the net and i hope you can help.
i would like to devide the background into two separate horizontal sections eg: 40% black and 60% a repeat image pattern.
is it possible to do this in css.
i think it might be with div tags, in the body section, but i've tried and failed in this.
but im probably not doing it right as im only a newbie to css.
ny tips would be gr8!
thanks a mil! :?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

the best way to achieve this

the best way to achieve this would be to create a .png graphic that makes use of alpha transparency.

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

You may accomplish this by

You may accomplish this by using the method below.

In your css add background image to you body,in you layout (html) add a "Wrapper or container" what ever you prefer to call it and make it act as another layer body, add this to the css "width:100%;" then add another background image to that and position it bottom, or top, what ever works for you. If needed like "CupidsToeJam" suggest use a .png.

You may keep adding as many containers / wrappers / layers as you like to you accomplish your goal. Think of it as layers in a "Photoshop" program or any other image processing program, and also keep in mind how html works when it automatically grows with content.

I am back Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

why the width: 100% ? A div

why the width: 100% ? A div being a block level element is full width by default. If margins or padding were added to said div a scroll bar would be introduced (with with 100% width declaration).

humbleCSS
humbleCSS's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT-4
Joined: 2009-03-12
Posts: 30
Points: 2

Thanks for this

Thanks for this wolfcry911

That is definitely true, but I not add any padding or margins to that div, I treat it like if it was the body, and put another div in it as my site wrapper.

I am back Smile

ailo
Offline
newbie
Last seen: 13 years 1 week ago
Joined: 2009-08-10
Posts: 2
Points: 0

thanks lads! i got it

thanks lads! i got it sorted!!!