Why Can't I Seem to Use Background-Clip

Why can’t I seem to use background-clip?

This is a common gotcha with shorthand properties in CSS.

Because background-clip is one of the properties that's set by the background shorthand property, your background style is implicitly setting background-clip to border-box (its initial value), overriding your explicit background-clip style:

background-clip: content-box;
background: #ddd none /* border-box */;

If you move your background-clip declaration beneath background, it'll work as expected:

background: #ddd none;
background-clip: content-box;

jsFiddle demo

webkit-background-clip: text on an element with transition is not working after the transition is over in mozilla but working perfect in chrome

As it seems you have ran into Firefox bug. Problem appears to be unrelated to transition, but from test based on your snippet its seems that Firefox refuses to render -webkit-background-clip: text of element that is translated more than its half width away:

onload=function(){

document.querySelectorAll('input').forEach(i=>i.oninput())}

#t {

  display: inline-block;

  background-image: linear-gradient(to right, red, red);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  transform: translateX(61px);

  outline: 1px solid red;

  font-size: 100px;

  color: green;

  font-family: monospace

}

  <div id="t"></div>

<p>

  Translate: <input type="range" min="0" max="600" value="30" step="1" oninput="t.style.transform='translateX('+this.value+'px)';tr.value=this.value"> <output id="tr"></output>

  <br>

  Content: <input type="text" value="a" oninput="t.textContent=this.value;w.value=getComputedStyle(t).width"><br>

  Width: <output id="w"></output>

background-clip:text has weird behaviour

Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

Can't seem to get a background image to fit full size (HTML,CSS)

To make the image cover the whole background you can use background-size: cover. I also noticed that your nav is behind your content, to fix this you could give it a higher z-index then the single-slider. You also need to set the position otherwise the z-index has no effect.

PS: I replaced your background with a placeholder to show you it works.

nav {
  float: right;
  shape-outside: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%);
  background: black;
  clip-path: polygon(0 0, 0 15%, 80% 15%, 80% 100%, 100% 100%, 100% 0%);
  z-index: 6;
  position: relative;
}

ul {
  color: white;
  text-align: right;
  width:min-content;
  white-space:nowrap;
}

li {
  display: inline-block;
  padding: 1em;
}

ul li:nth-child(3)~li {
  float: right;
  clear: right;
  writing-mode: vertical-lr;
}

a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: inherit
}
/*===== HEADER HERO =====*/
.single_slider {
  position: relative;
  height: 800px;
  z-index: 5;
  background-size: cover;
  background-position: center; /* optional */
}

@media only screen and (min-width: 1400px) {
  .single_slider {
    height: 770px;
    
  }
}

@media (max-width: 767px) {
  .single_slider {
    height: 650px;
  }
}

.single_slider::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(57, 36, 36, 0.5);
  top: 0;
  left: 0;
  z-index: -1;
}

<nav>
  <ul class="horizontal">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li class="far fa-circle"></li>
    <li><a href="#">Review</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div id="home" class="header_hero slider-active">
  <div class="single_slider bg_cover d-flex align-items-center" style="background-image: url(https://picsum.photos/500)">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-10 col-sm-11">
          <div class="slider_content">
            <h3 class="title" data-animation="fadeInUp" data-delay="0.2s">Mind Blowing Photograpy Web Template</h3>
            <p data-animation="fadeInUp" data-delay="0.6s">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="javscript:void(0)" class="main-btn main-btn-2" data-animation="fadeInUp" data-delay="0.9s">Download Now</a>
          </div>
        </div>
      </div>
    </div>
</div>

Is there any difference between background-clip and background-origin?

According to the MDN:

The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.

while

The background-origin CSS property determines the background
positioning area, that is the position of the origin of an image
specified using the background-image CSS property.

• https://developer.mozilla.org/en-US/docs/CSS/background-clip
• https://developer.mozilla.org/en-US/docs/CSS/background-origin

Both properties have three options: border-box, padding-box, and content-box. The background-origin property determines where the background is placed (defaulting to padding-box) while the background-clip determines what part of the background is shown (defaulting to border-box). The properties can be used together or independently.

Some examples may be useful:

• Default (neither property specified)

Background-origin

• Background-origin set to border-box - Notice how the background image has been shifted slightly up and to the left so that the origin of its position is under the border of the div (the border has been made transparent to help visualize this).
• Background-origin set to padding-box (default) - Since the padding-box value is the default value, this should look the same as the default example.
• Background-origin set to content-box - Notice how the background image has been shifted slightly down and right so that the origin of its position is the content area of the div, which is determined by the padding applied to the div.

Background-clip

• Background-clip set to border-box (default) - Here there is no difference from the default example since the background image's origin is the padding box (default) and the background-clip is set to border-box (default). In this case the image isn't being clipped since it fits within the border-box.
• Background-clip set to padding-box - Here there is no difference from the default example since the background image's origin is the padding box (default) and the background-clip is set to padding-box. Like in the previous example the image isn't being clipped since it fits within the padding-box.
• Background-clip set to content-box - Here you can see that the background is being clipped as the padding applied to the div creates a small content area. The origin of the background image is still the padding-box.

Background-clip and background-origin used together

• Background-clip set to padding-box and background-origin set to content-box (both non-default values) - here you can see the origin of the image has been set to content-box so that it's pushed down and left from it's normal position by the div's padding. Then the background-clip has been set to padding-box so that the image does not show under the bottom or right border (it would if it were set to border-box).

Chrome is rendering partial pixels when background-clip property is set to content-box

My bug reported has been aaccepted by Chrome devs. It's already assigned to someone for fixing.

https://bugs.chromium.org/p/chromium/issues/detail?id=957946

---

Related Topics