Magento 2: Background gradient and image

Question

Magento 2.2.1 custom theme which inherits from Magento/blank.

I am trying to assign a background which has a radial gradient as the bottom layer and an image as the top layer.

Assigning a solid colour and then assigning a background image displays as expected.

_extends.less:

body {
  background: #333;
  .lib-css(background-image, @page__background-image);
  background-repeat: no-repeat;
  background-position: 50% 250px;
  background-size: 40%;
}

The value for background-image is defined in _theme.less as follows:

@page__background-image: url('@{baseDir}images/background-image.png');

In order to achieve the desired result, I have modified the CSS, like so:

body {
  background: rgb(51,51,51); /* Old browsers */
  .lib-css(background-image, @page__background-image);
  background: @page__background-image,
              -moz-radial-gradient(center, ellipse farthest-corner, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 52%, rgba(17,17,17,1) 100%); /* FF3.6-15 */
  background: @page__background-image,
              -webkit-radial-gradient(center, ellipse farthest-corner, rgba(34,34,34,1) 0%,rgba(34,34,34,1) 52%,rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: @page__background-image,
              radial-gradient(ellipse at center, rgba(34,34,34,1) 0%,rgba(34,34,34,1) 52%,rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-repeat: no-repeat;
  background-position: 50% 250px, 0% 0%;
  background-size: 40%, 100% 100%;
}

Following these changes, the image displays as expected, but the background does not extend to fill the height of the container.

Presumably, this is because it is not being applied via the .lib-css mixin, so the original styles are not being overridden properly, but I'm unsure how to implement this solution.

Answer 1

It appears that the body does not extend past the main content of the page, so I removed all styles from the body and instead applied the following style:

.page-wrapper {
  background: rgb(51,51,51); /* Old browsers */
  .lib-css(background-image, @page__background-image);
  background-repeat: no-repeat;
  background-position: 50% 250px, 0% 0%;
}

Mixin defined as follows:

@page__background-image: url('@{baseDir}images/background-image.png'), radial-gradient(ellipse at center, rgba(34,34,34,1) 0%, rgba(34,34,34,1) 52%, rgba(17,17,17,1) 100%);