39

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!

1

9 Answers 9

53

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;
}
4
  • Note, this does not work with percentage values like 50%
    – jsheffers
    Commented Feb 2, 2015 at 21:27
  • Note, IE9 not & opera mini do not support linear-gradient
    – Flion
    Commented Dec 4, 2015 at 16:42
  • This appears more pixel-perfect. With just a linear-gradient I got some "blurry" lines in some browsers when the element was too big.
    – hesselbom
    Commented Jan 14, 2016 at 9:01
  • 6
    Some browsers are expecting new syntax to left instead of left. My Chrome (79) throws errors if the old syntax is used unless the -webkit prefix is used
    – sofly
    Commented Oct 15, 2019 at 19:12
22

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.

4
  • I went to the demo on JSFiddle and saw nothingness as a result, even if I push run. I was expecting the clr div background color just offset a bit, but nothing whatsoever showed. Is there an error in the script? For whatever it is worth, I tried adding the CSS from Ash's answer and saw nothingness too. I even tried adding that to the original one. Commented Jun 23, 2014 at 22:51
  • @SarahWeinberger - Try the JSFiddle link again, I've added browser prefixes to the CSS.
    – StuR
    Commented Jun 24, 2014 at 9:09
  • Thanks, the updated code worked. Note to others: The Visual Studio 2013 internal design view does not show the gradient/color. You must run the example in a real browser to see the result. I fell into this trap and tried to find out the difference between Fiddler and my browser (VS2013 Design View) and realized that VS is not a true browser and has limitations. Commented Jun 24, 2014 at 15:58
  • 2
    Voted for this because it allows the use of percentages not just pixel values.
    – jsheffers
    Commented Feb 2, 2015 at 21:45
19

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

1
  • hm, everything has a work-around
    – Dan D.
    Commented Nov 13, 2021 at 13:41
10

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;
}
2
  • 1
    This should be the accepted answer, using this you can offset a background-color indirectly.
    – po10cySA
    Commented Aug 4, 2019 at 11:37
  • I find this approach the best. If the :before pseudo element needs to be behind the content of myElement, make sure to specify position:relevant to myElement.
    – Wtower
    Commented Apr 22, 2023 at 12:59
8

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

2
  • I chose this method for password strength on an input field. Onkeyup set style.backgroundSize = percentStrength + "% 100%"; The other approaches didn't seen to work for me. Commented May 25, 2018 at 15:10
  • Best approach in my opinion Commented Jun 5, 2019 at 13:03
7

Yes, with linear-gradient it works:

div { background-image: linear-gradient(transparent 10px, grey 10px); }
1
  • linear-gradient(to right, blue 10px, transparent 10px) for horizontal
    – Aidin
    Commented Oct 8, 2020 at 9:15
4

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>

1
  • I've been looking for this solution for ~2 hours! You sir/ma'am have made my day :)
    – Josh Clark
    Commented Sep 22, 2022 at 21:40
2

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

0

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:
enter image description here

HTML:
enter image description here

EXAMPLE:
enter image description here

Note this might have side effects for buttons and links. Test it for your use case. Good luck! Happy Coding

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.