/    Sign up×
Community /Pin to ProfileBookmark

background-image….with 3 parts??

Copy linkTweet thisAlerts:
Oct 28.2007

Hey,

Bit of an odd question here, so have patience ?

I have a div for the background behind a huge form I’m building.

Now the idea is to have a bottom curve graphic, a top curve graphic and a 1px high many pixel wide middle.

Is this possible to do with CSS and the background-image property?

The top and bottom curve would be small but the middle would be stretched.

Thanks for any wise words on this.

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelOct 28.2007 — [B]html[/B] {background-image: url(topCurve.jpg) top left; ... }

[B]body[/B] {background-image: url(bottomcurve.jpg) bottom left...}

and let's assume that the 'topcurve.jpg' and 'bottomCurve.jpg' images are [B]height:300px[/B], so you use 'margin' the wrapper's top & bottom:

#wrapper {margin:300px 0 300px 0; background-image:url(middle.jpg) repeat-y; height: auto;...}

and the image "middle.jpg" (a small image, probably only a few dozen pixels square-ish) completes the [I]topCurve.jpg[/I] and [I]bottomCurve.jpg[/I] to form a smooth curve or transition. If the '#wrapper' image is a straight edge, you could just use "border-left:[I]foo[/I]px solid [I]color[/I];" whereby "[I]foo[/I]" is the appropriate width to mate cleanly with [I]topCurve[/I] & [I]bottomCurve[/I]..

Since "wrapper" is expandable (height: auto; ), it doesn't affect the meeting-point at the top or bottom of "#wrapper". The [I]margins[/I] top & bottom keep the background images viewable. "border-left:" would also do the same.

"body" and "html" are good places to place 'permanent' background-images that are completely unaffected by content. And tag element inside of "<body>" that has 'background-image' has to be tiling (in this case, [I]repeat-y[/I]) and match smoothly to body & html to complete the effect.

I have done this before, creating a slopey-curvacious effect that seamlessly expands with added content.
×

Success!

Help @invision spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...