background position for background color - css

Question

Im able to give the start position of an background image. But if i give positions for solid fill background its not working.
Here is the js fiddle for that.
http://jsfiddle.net/yPVJE/
So can we set the start position and the size of an solid fill backgrounds?
Thanks!

Answer 1

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;
}

Answer 2

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.

Answer 3

You can not offset a background color. Only background images have a position.

Answer 4

If you can make a ::before pseudo element with bg color, height and width and just offset it from its parent, you'll have complete control of its appearance. Much easier than putting a border in the pseudo element:
/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */
.myElement::before {
background-color: #fff;
content: "";
margin: 0 auto;
position: absolute;
top: 43px;
right: 0;
width: 300px;
height: 201px;
z-index: -1;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

Answer 5

Yes, with linear-gradient it works:
div { background-image: linear-gradient(transparent 10px, grey 10px); }

Answer 6

Watch out for improper alignment when linear-gradient points are used.
Here's a better approach:
background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;
It uses linear-gradient just to generate solid color, which is then resized to reflect the covered area size.
Also background-position could be used as needed, for example:
background: linear-gradient(#6699cc, #6699cc);
background-size: calc(100% - 30px) auto;
background-repeat: no-repeat;
background-position: right;
In the last example, the background color would 'start' 30px from the left of the div.
Further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 7

You can use background-size instead of background-position to restrict the colored area:
// randomly set background size every 1 second
var elm = document.querySelector('div');
window.setInterval(()=> {
var randomValue = Math.random()*100;
elm.style.backgroundSize = randomValue + '%';
}, 1000)
div {
height: 100px;
border: 1px solid black;
transition: .4s ease-out;
background: linear-gradient(to right, black, black) no-repeat;
background-size: 0; /* <--- starting from 0% */
}
<div></div>

Answer 8

Another way to accomplish this would be to add a pseudo-element to the div element like so:
div {
::before {
border-top: 10px solid #0066a4;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 12px; left: 0; right: 0; bottom: 0;
z-index: -1;
}
}
See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm

Answer 9

You can achieve this by having the parent element and child element position: relative;. Next, you can just go in and set offsets. There are a few other ways to achieve this but this is one of the many takes.
SCSS:
HTML:
EXAMPLE:
Note this might have side effects for buttons and links. Test it for your use case. Good luck!
Happy Coding