CODEWITHSUNDEEP
cssbackgroundgradient
ibi0tux
ibi0tux

Reputation: 2619

CSS : Positioning background gradient with fixed attachment at bottom right corner

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 !

Upvotes: 0

Views: 1658

Answers (1)

Trevan Hetzel
Trevan Hetzel

Reputation: 1369

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).

Upvotes: 1

Related Questions