Why is setting a background-size necessary to make this changing linear gradient work

Question

Without specifying a background-size, in this case "background-size: 370% 370%;", the changing linear gradient animation does not work.

For some reason, the background-size also only works when declared as important (ex: background-size: 370% 370% !important;)

I've tried removing the background-size but then the animation isn't visible.

.bg {
  height: 100vh;
  background-size: 370% 370% !important;
  animation: bggradient 30s ease-in-out infinite;
  background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62);
}

@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

<div class="bg"></div>

I would expect to see an animation without specifying the background-size. I also would expect to use the background-size without having to set it to important.

background: xx ; is the short hand, so it resets also background-size. for the gradient, use only background-image . see : https://developer.mozilla.org/en-US/docs/Web/CSS/background to learn how to use the background syntax — G-Cyrillus, Jun 20 '19 at 18:46
Following on from what G-Cyr mentions above - move `background-size` after the `background` and you can do away with the `!important` — ScottieG, Jun 20 '19 at 18:56

Bali Balo · Answer 1 · 2019-06-20T19:05:40.177

background-position with percentages aligns the nth percentage of the background-image with the nth percentage of the container.

0%, equivalent to left will align the left side of the image with the left side of the container.
50%, equivalent to center will align the center of the image with the center of the container (the image will look fully centered).
100%, equivalent to right will align the right side of the image with the right side of the container.

This makes sense in most cases as you probably want a portion of your image to be visible (if it aligned the left side with the desired percentage like the left property for example, 100% would make he image fully outside to the right of its container).

A linear-gradient does not have intrinsic dimensions and by default is 100% width and 100% height of its container. Which means the background-position will have no effect no matter what it is (the image always perfectly fit the container, the left side is always aligned with the left side etc.). To allow it to actually move, you need to make it bigger than its container.

You could also use a background-position with a length (px) instead of percentages, but that would probably not fit your needs.

EDIT:
I misread part of the question, my bad. The reason for which !important is needed, as someone said in the comment, is because background is a shorthand for all background properties and will reset all unspecified values.

Using background-image instead would work:

background-image: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62);

Abdelillah Aissani · Answer 2 · 2019-06-21T08:30:07.897

0

your background property is actually overwriting the background-size property because backgroundproperty include all other background proprieties such as color , size , url ...etc so you need to either make your background-size property under the background property so it overwrites it or just specify that on the background property like this background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 0 0/370% 370%

edited Jun 21 '19 at 08:30

answered Jun 20 '19 at 19:05

Abdelillah Aissani

3,058
2
10
25

2

`background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 370% 370%` --> this won't work because the percetange will be consider as background-position with this syntax not background-size. You need something like `background: linear-gradient(to right, #ff9966, #ff5e62, #ff9966, #ff5e62) 0 0/370% 370%` – Temani Afif Jun 20 '19 at 19:27

Why is setting a background-size necessary to make this changing linear gradient work

2 Answers2