Bottom gradient going in too far when browser is shrunk

Question

There is a site at http://beta.es3inc.com and you will notice at the bottom that it has a gradient at the bottom, however when the user shrinks his browser you will notice it sliding to the left, which is fine just as long as it doesn't go in too far. It should be flush with the minimum width of the divs above it when shrunk too far, however it will keep pushing left. Any ideas on how I would be able to do this?

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

Use CSS3 Gradient as seen here:

http://css-tricks.com/examples/CSS3Gradient/

and some IE solutions are in question here:

Gradient colors in Internet Explorer

edited May 23 '17 at 10:24

Community

1
1

answered Jul 05 '11 at 14:05

Marek Sebera

39,650
37
158
244

I am a bit skeptical of this solution because CSS3-compatability is very shaky and this code: " background-color: #1a82f7; background-image: url(images/linear_bg_1.png); background-repeat: repeat-y;" for a fallback is the basic thing it is already using causing which shrinks too far and makes the white go under the links. – Travis Pessetto Jul 05 '11 at 14:15

score 0 · Accepted Answer · answered Jul 05 '11 at 22:02

I think the best way to achieve what I am doing is through JavaScript so I wrote this JQuery one, just in case anyone has anything like it...

/*Script is designed to keep a gradient from being cropped by the browser
this script requires JQuery, tested on version 1.6 free with no waranty GPL licence.

SETUP-Place what you need here:...*/
var whenreaches = 1100; //When resize reaches this point do it to provide a smooth  transition
var minwidth = 500; //This will be the min width in px, if it reachs this the Javascript will switch the CSS

//Resize event will trigger this JS...
$(window).resize(function(){
 var current_width = $(window).width();
 var current_bg = $('body').css('background-position');
 if(current_width <= whenreaches){
 //We need to change it to scroll, so the effect is not lost
    $('body').css('background-attachment','scroll');
    $('body').css('background-position',minwidth+"px 0%");
 }
 //Make sure it can return too
 if(current_width >= whenreaches){
    $('body').css('background-attachment','fixed');
    $('body').css('background-position',"100% 100%");
 }
  });

You will have to tweak whenreaches and minwidth values to your background image and HTML document

A better solution would to be to use the CSS min-width attribute. — Travis Pessetto, Nov 02 '11 at 16:06

Bottom gradient going in too far when browser is shrunk

2 Answers2