Prevent gradient from repeating, if that is what it is doing here

What exactly will work to fix that?

I tried adding: background-repeat: no-repeat;

That did nothing.

https://jsfiddle.net/zhpqk9gc/

Even tried this: https://jsfiddle.net/7Lsjm926/2/

.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7,
.bg8,
.bg9 {
    background-repeat: no-repeat;
}

:root {
  --color-a: linear-gradient(to bottom right, #180cac, #d054e4);
}

.bg1 {
  background-image: var(--color-a);
}

.bg2 {
  background-image: linear-gradient(-225deg, rgb(117, 93, 213) 35%, rgb(55, 136, 209) 100%);
}

.bg3 {
  background-image: linear-gradient(135deg, rgb(44, 209, 255) 0%, rgb(250, 139, 255) 100%);
}

.bg4 {
  background-image: linear-gradient(155deg, #0190df, #9300e4);
}

.bg5 {
  background-image: linear-gradient(143deg, #504099 0%, #32C39F 100%);
}

.bg6 {
  background-image: linear-gradient(167deg, #238af8 0%, #27e0c0 100%);
}

.bg7 {
  background-image: linear-gradient(110deg, #1e089b, #4702a0);
}

.bg8 {
  background: linear-gradient(45deg, rgb(200, 25, 210), rgb(20, 55, 110));
}

.bg9 {
  background: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: var(--color-a);
}

Also tried removing this:

:root {
  --color-a: linear-gradient(to bottom right, #180cac, #d054e4);
}

.bg1 {
  background-image: var(--color-a);
}

Replacing with: all backgrounds instead of image background.
https://jsfiddle.net/1xLt7pse/2/
.

bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6,
.bg7,
.bg8,
.bg9 {
    background-repeat: no-repeat;
}

.bg1 {
  background: linear-gradient(to bottom right, #180cac, #d054e4);
}

Why don’t you refer to your previous demos where we went through this in detail?

Everything you have there is wrong.

You put the background-repeat styles before other background rules and so are overwritten.

e.g.

.bg8,
.bg9 {
    background-repeat: no-repeat;
}
/* above is pointless */
.bg8 {
  background: linear-gradient(45deg, rgb(200, 25, 210), rgb(20, 55, 110));
}

The background shorthand resets the value back to repeat.

Even if you do that correctly then your gradient won’t extend past 100% as you set html.body to 100% only. If you have to scroll then the gradient will scroll away and leave blank space.

That’s why in your other demos a fixed position pseudo element was used to maintain a gradient that only filled the viewport.

Refer to your old demos if you want the same effect.

1 Like

Like this?

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Like this? https://jsfiddle.net/7fvszgb9/3/

Is margin: 0 auto:

needed on here?

I don’t think so.

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

No use a pseudo element.

body:after{etc…}

You have done this lots of times.

After doesn’t work because there is a video on the screen.

So, this then?

https://jsfiddle.net/k7qejvht/

.bg1 {
  --color: linear-gradient(to bottom right, #180cac, #d054e4);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before{
  content: "";
  background: var(--color);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

That is using :after and it works.

It is using :before

If after is used, then the background covers the video screen.

body::before{
  content: "";
  background: var(--color);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

You have not set the z-index so you are just hoping that it sits under any other content if you don’t.

Use z-index:-1 and you can use :before or :after.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.