One place for hosting & domains

      Images

      How to Change a CSS Background Image’s Opacity


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      With CSS and CSS3 you can do a lot of things, but setting an opacity on a CSS background is not one of them. However, if you get creative, there are a ton of creative work-arounds you to make it seem like you’re changing the CSS background image’s opacity. Both of the following methods have excellent browser support down to Internet Explorer 8.

      Method 1: Use absolute positioning and an image

      This method is exactly like it sounds. You simply use absolute positioning on an a normal img tag and make it seem like you used the CSS background-image property. All you have to do is put the image inside of a position: relative; container. Here’s what the HTML markup generally looks like:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
        <img src="https://xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png">
      </div>
      

      And here’s what your CSS will look like:

      .demo_wrap {
          position: relative;
          overflow: hidden;
          padding: 16px;
          border: 1px dashed green;
      }
      .demo_wrap h1 {
          padding: 100px;
          position: relative;
          z-index: 2;
      }
      .demo_wrap img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0.6;
      }
      

      The trick here is to absolutely position the img and stretch it so it fills the entire parent container. And to relatively position everything else so that you can set a z-index that pulls it above the img.

      Here’s a live demo:

      Method 2: Using CSS Pseudo-Elements

      This method is seems simple once you see it, and is definitely my preferred method of doing this. Using CSS pseudo-elements of either :before or :after, you a div with a background image and set an opacity on it. Here’s what your HTML markup would roughly look like:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
      </div>
      

      And here’s what the CSS looks like:

         .demo_wrap {
          position: relative;
          background: #5C97FF;
          overflow: hidden;
      }
      .demo_wrap h1 {
          padding: 50px;
          position: relative;
          z-index: 2;
      }
      /* You could use :after - it doesn't really matter */
      .demo_wrap:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0.6;
          background-image: url('https://xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png');
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;
      }
      

      Here again we must move the z-index of content (in this cas the <h1>) above the background pseudoelement, and we must explicitly define the position: absolute; and z-index: 1 on the :before pseudoelement.

      The rest of the attributes on the pseudoelement exist to position it to overlap 100% of the parent, and also make use of a clever new CSS property: background-size: cover which sizes the background to cover the element without changing proportions.
      Here’s a nice little demo of this method:



      Source link

      Cropping Images in CSS With object-fit


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      We often need an image to fit exactly into a certain given dimension, but while keeping its aspect ratio and avoid having a squished image. This wasn’t something that could easily be done using CSS for the longest time. One trick was to resort to using a background image instead to go around the issue. Well the problem is no more with the object-fit property!

      Along with inherit, initial and unset, there are 5 more possible values for object-fit:

      • contain: The image keeps its original aspect ratio, but resized so that the longest of either the height or width can fit in the given dimensions.
      • cover: The image keeps its original aspect ratio and the image area is completely covered.
      • fill: The initial value. The image will fill its given area, even if it means losing its aspect ratio.
      • none: The image is not resized at all, and the original image size fills the given area.
      • scale-down: The smaller of either contain or none.

      Example

      The following image’s original width is 1200px and height is 674px. Here it’s shown at half its size, 600px by 337px:

      Our starting image

      Now we have a problem if we need the image to be the same height, but fit in half the width. The original aspect ratio is lost and the result is a squished image:

      Our image lost its aspect ratio

      object-fit values

      object-fit can fix that issue for us. Let’s showcase the different values:

      object-fit: contain

      .alligator-turtle {
        object-fit: contain;
      }
      
      Our image lost its aspect ratio

      object-fit: cover

      .alligator-turtle {
        object-fit: cover;
      }
      
      Our image lost its aspect ratio

      object-fit: fill

      .alligator-turtle {
        object-fit: fill;
      }
      
      Our image lost its aspect ratio

      object-fit: none

      .alligator-turtle {
        object-fit: none;
      }
      
      Our image lost its aspect ratio

      object-fit: scale-down

      .alligator-turtle {
        object-fit: scale-down;
      }
      
      Our image lost its aspect ratio

      In this particular example, object-fit: cover is probably what will work the best for our needs.

      object-position

      Now, say your image was cropped with object-fit, but the part of the image that’s shown is not positioned as you’d like. You can use the object-position property to control exactly that.

      Let’s start with our object-fit: cover example:

      .alligator-turtle {
        object-fit: cover;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      Now let’s change the position of the visible part of the image on the X axis so that we see the right-most edge of the image:

      .alligator-turtle {
        object-fit: cover;
        object-position: 100% 0;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      And finally, here’s what happens if you provide a position that’s out of bounds:

      .alligator-turtle {
        object-fit: cover;
        object-position: -20% 0;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      Browser Compatibility:
      As of 2020, Can I Use object-fit? tells us 97% of global browsers support it. Internet Explorer 11 does not.



      Source link

      Gradient Borders and Border Images in Pure CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Borders in CSS are old news, but maybe you didn’t know that border images and gradient borders are also possible with CSS now, thanks to two properties: border-image-source and border-image-slice.

      Border Images

      You can use images that replace the default border style. Here’s a simple example. First, our markup:

      <div class="box box-1">Just a box! 😄</div>
      

      And then the styles for our box:

      .box {
        width: 400px;
        height: 200px;
        max-width: 100%;
        background: var(--bg2);
        margin: 1rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }
      
      .box-1 {
        border: 20px solid;
        border-image-source: url(/url/to/some/fancy/image.jpg);
        border-image-slice: 60 30;
      }
      

      Just a box! 😄

      You’ll notice that there’s still needs to be a regular border applied to the element because the border image replaces the regular border style.

      border-image-source specifies the source image, which can be a URL to a raster or vector-based image (SVG) or a data URI.

      border-image-slice is also needed in order for the desired effect to be achieved. That one can be a little complicated to fully grasp, but the gist of it is that behind the scenes the engine slices the image into a 3 X 3 grid, with the center section being transparent by default. border-image-slice is used to specify how the image is distributed on that grid. It can take up to 4 values which can be numerical or percentage values. Here’s a great reference article by Codrops and another one by CSS-Tricks if you want to venture into fully understanding border-image-slice.


      Shorthand property with border-image

      There’s a shorthand property to specify the values for both border-image-source and border-image-slice all at once: border-image. Here’s the same example, but using the shorthand:

      .box-1 {
        border: 20px solid;
        border-image: url(/url/to/some/fancy/image.jpg) 60 30;
      }
      

      Gradient Borders

      Since gradients in CSS are really generated images, creating gradient borders is as simple as using a linear, radial or conic gradient in place of a regular image source.

      First, a linear gradient border:

      .box-2 {
        border: 10px solid;
        border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));
        border-image-slice: 1;
      }
      

      Linear gradient! 😄

      As you’ll notice, the slicing on such gradients is much simpler and a simple value of 1 will do. So, using the shorthand, we get:

      .box-2 {
        border: 10px solid;
        border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
      }
      

      Here’s the same example, but as a radial gradient:

      .box-3 {
        border: 10px solid;
        border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
      }
      

      Radial gradient! 😄


      And then finally a conic gradient for good measure, here with all the hues of the color wheel to create a rainbow gradient:

      .box-4 {
        border: 10px solid;
        border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
      }
      

      I ❤️ 🌈

      What About Border Radius?

      Unfortunately border images can’t have a radius just yet, so if you want your element to have a border radius and a gradient border, you’ll have to resort to using a workaround that probably involves another HTML element.

      Browser Support: As of 2020, Can I Use border-image? shows 99% of worldwide browsers supporting the border-image property.



      Source link