background position for background color

This is one way to offset a solid background color, using a linear gradient with a transparent colour for the first x number of pixels:

.offset {
    background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%);
    width: 100%;
    height: 500px;
}

Here's a demo on JSFiddle.


I would take a similar approach to StuR, but using background position instead of gradient points. You can then set your background position as you would usually.

div {
  background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}

Tags:

Css