0

I'm stuck on a CSS problem.

I would like to get a CSS stripe as background of my page like i did here, except that i want the stripe to be located on the bottom right corner of the page.

Moreover i want it to be a fixed background attachment.

I tried what is suggested here : How to position background image in bottom right corner? (CSS) but it seems to work only for background images and not for background gradients.

I tried changing offsets in the gradient definition but it's still relative to the top left corner, and the result would differ if the window size changes.

Here's my current code :

body
{
    background: linear-gradient(
        150deg,
        rgba(180,214,14,0.0) ,
        rgba(180,214,14,0.0) 70px,
        rgba(180,214,14,0.4) 80px,
        rgba(152,197,10,0.5) 150px,
        rgba(0,0,0,0.4) 151px,
        rgba(0,0,0,0) 160px
    ), no-repeat 0 0 !important;

    background-attachment: fixed !important;    
    /* background-position: 80% 80% !important; */
    background-repeat: no-repeat !important;
}

Any advice is welcomed !

Community
  • 1
  • 1
ibi0tux
  • 2,481
  • 4
  • 28
  • 49

1 Answers1

1

I think you are correct, in that the background-position property only works for images and not gradients. At least that's what I'm finding by playing around with it.

So this isn't an answer to "how to make background-position work for gradients", but rather a suggestion to put your gradient on a different element and position IT to the bottom right.

Like:

div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
  background: linear-gradient(
      150deg,
        rgba(180,214,14,0.0) ,
        rgba(180,214,14,0.0) 70px,
        rgba(180,214,14,0.4) 80px,
        rgba(152,197,10,0.5) 150px,
        rgba(0,0,0,0.4) 151px,
        rgba(0,0,0,0) 160px
  ), no-repeat 0 0;
  background-position: center;
}

Granted, you'll probably have to change the gradient to fit better within that element, but I think this might be the only way to achieve what you're trying to do.

Also, you'll want to make sure that body has position: relative (or whatever the containing element is).

Trevan Hetzel
  • 1,371
  • 7
  • 21
  • 42
  • I tried your code, but there's still something missing. First, i changed position absolute to fixed, this I want the div to scroll along with the page, but happens is that the stripe is still stopped by the left border of the div instead of the bottom border, and if i size up the width of the div, the stripe won't start from the right, but from the middle of the div. – ibi0tux Oct 23 '14 at 13:38