CSS Background Gradient with Offset

CSS Background Gradient with offset

You can achieve what you want like this: Place your background at 0px 0px and define a gradient with more color-stops, having one solid color area at the top and then the actual gradient, like this:

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);  

(The sample code works on latest versions of Chrome and FireFox, but adapting it to support all major browsers and versions is straight-forward, applying the same principle.)

See, also, this short demo.

Css background: offset for repeating-linear-gradient

You might use background-position property.

.repeating-grid {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-size: $major-grid-size $major-grid-size;
  background-image:
    repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
    repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

  background-position: 15px 0;
}

Angled gradient with top offset by specific number of pixels

You can approximate it using pseudo element and rotation. You consider a straight gradient (90deg) then you rotate it by adjusting the transform-origin to have the distance you want on the top:

.box {
   height:300px;
   position:relative;
   overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  /* a random big value for top bottom and left*/
  top:-500px;
  bottom:-500px;
  right:0;
  left:-500px;
  /**/
  /* in the below 625px = 125px + 500px and adjust the 350px to get close to the gradient you wnat*/
  background: linear-gradient(90deg, white 350px , black 625px, blue 0, white);
  transform:rotate(-15deg);
  transform-origin:625px 500px;
}

<div class="box">

</div>

Using CSS background image to output grid using gradient with offset

You can fix it by using background-size and linear-gradient instead of repeating-linear-gradient:

:root {
  --background-grid-color: deeppink;
  --background-fill-color: #000;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Vertical lines */
  background-color: var(--background-fill-color);
  background-image:
    linear-gradient(
      to right,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    )
  ;
  background-position: 100px 0, 0 0;
  background-size: 200px;
}

CSS repeating gradient with offset

Just wrap the title within a span:

<span>Title</span>

and give the span an absolute positioning:

.gradient > span {
  position: absolute;
}

How to position an background-image using an offset but not the linear gradient

What you need to do is separate the position for both the backgrounds using a comma..

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

So in your case, image is first and gradient is second so it should be..

select {
  background-position: right center, 0 0; 
  /* Use pixels instead of right and center for better control... 
     where 1st parameter is x and the other parameter is y
   */

  /* Rest stays the same */
}

Background position offset from bottom: opposite behaviour in Chrome and Firefox

I found solution for Chrome!

It is sufficient to add

 background-repeat:no-repeat;

to BODY tag css declaration, as showed in this updated JsFiddle:

---

Related Topics