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

Posted on 2011-04-27
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
    LVL 6

    Accepted Solution

    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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    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…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now