• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

how would i slice and code the css for this content area?


I am fairly new to css and i have completed my design in photoshop, but i dont know how i am going to slice the image up and code the css for the content areas!

They have a gradient, curved edge and a border.

I want it so that when you are typing in the div of the content area the image/borders move down with the text.

I have attached an image as im probably not explaining this very well. I know one way of doing this is to have it as a background image then have a div on top but then if the text is runs over the image it will not move down with the text.

Any info or tips on how i might do this would be great as im abit unsure of where to slice and how i could achieve my goal in css?

Thanks for any help!



Staff member
sorry got to say it as I know everyone will be thinking it...

the text in the image is for a web design company or offering that type of service so shouldn't you know about this before offering a service which requires an understanding of css etc?

Personally I'd do the sections as individual div's and/or columns as needed and then add backgrounds and images etc
im just practicing mate, i could have put anything there, but can see where your coming from lol.

Ive just designed a layout in photoshop and trying to learn how to do it now, i think ill be ok with the rest, but im not sure how i would go about this part.


Active Member
Im assuming your talking about the Welcome and what we offer section and they are fixed width on the x axis

If the curved border is not imperative to your visual design in internet explorer range of browsers i would simply use css3 to round off the corners, google css3 border radius. and let the ie users just see the square edge.

Then its a simple case of just setting the background of the content dive with a 1px (width) by XXX height grad image that is set to repeat on the x axis. job done.

If the rounding of the corners is imperative in ie range of browsers you have two options.

Either us javascript to give you the effect your looking for google- jquery rounded corners
or you use 2 divs, 1 to hold the top and background, the other to hold the content and foot. again job done.