How to apply a gradient background image to left and right borders?

Posted on 2011-04-27
Medium Priority
Last Modified: 2012-05-11
I need to create a web page that will have a gradient background on the left, and a gradient background on the right sides of the page. The gradient needs to extend down the full length of the page regardless of how long the page goes.

But here is the tricky part - the gradient on both sides needs to always occupy the outer most 120 pixels of the page regardless of how the user shrinks or expands the page. It needs to grow out and in as the user resizes the page.

So the page will always have a white center, but will always have a 120 pixel gradient image on the left 120 pixels and always have a 120 pixel gradient image on the rightmost 120 pixels of the page no matter how the user resizes the page.

Is this even possible?
Question by:rascal
1 Comment

Accepted Solution

GregArnott earned 2000 total points
ID: 35480770
CSS3 generators - will generate the gradient for you.

The most consistent approach (if cross-browser consistency is important to you) is to have a div or similar on either side of content with a tiled background.
ie: background: url(bg_tile_left.png) repeat-y;

This left and right div would need to be fixed width of 120px. The other content regions can be fluid as required.

Cheesy and easy method would be to have these divs inside content div and floated left and right respectively.

Chrome/safari: (need to fiddle values)
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

border: 120px solid #000;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Open in new window


Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month7 days, 10 hours left to enroll

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question