linear-gradient background from center / middle

Question

Is there a way to use linear-gradient background which is starting from the center / middle of the screen?

This is my current css:

body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 800px;
    background: blue;
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
    background: linear-gradient(to left, black, blue, blue, black 800px);
}

Gradient bg is stopping after 800px (what I want), but it is on the right side of the screen, instead of behind the content of the webpage. I cannot move it to anywhere else. Also it is appearing at different distances from the content, depending of the window size. I need it to be fixed to the center, behind my content.

Maybe something like the next line exists?

background: linear-gradient(to sides, blue, black 400px);

So I'd need to be able to set the starting position of the linear-gradient to the center and let the browser run it to both sides. 400px from center is where it should stop (and after that use the last color) - so a total of 800px wide the gradient should be.

Solution

If i understand your request correctly, this is what you want:

body, html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  background-image: linear-gradient(to right, black, blue 400px, black 800px);
  background-size: 800px 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

Comments

[JaSon]

Thank you, this is the best solution so far. I'll need to change some other things too, some small problems appeared, like the bottom part of the page got lost. :D

[JaSon]

I tried with margin:0 before too. I wrote it wrong as actually the background was not appearing after the original 100% of the screen height. Needed to change your last line: background-repeat: repeat-y; , now it works fine!