One place for hosting & domains

      Images

      How To Style Images With CSS



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will learn how to style images with CSS to add a border, and change the shape, and size of the image. Using CSS to style images allows you to uniformly specify how images should appear across your website with only a few rulesets.

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Adding Images To index.html

      First, you need to add an image to the images folder. You can download the image from the demonstration website or use any image in a JPEG/JPG or PNG format. This exercise will also work better if the dimensions of your image are around 150-200 pixels by 150-200 pixels.

      Note: To download the image of Sammy the Shark, visit this link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg to your images folder.

      Once you have selected an image, save it to your images folder as small-profile.jpeg. If you save it as a different file name, you’ll need to modify the image file path in the step below.

      Next, erase all the content in your index.html file (except for the first line of code: <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">) and add the following code snippet:

      index.html

      <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
      

      This code snippet uses the <img> tag to insert an image and gives the browser the location of the image file (images/small-profile.jpeg). Make sure the highlighted file path is correct if you have changed the file name of your image.

      Note:
      To copy the file path of your image using Visual Studio Code, hover over the icon of the image file in the left-hand panel, click CTRL + Left Click (on Macs) or Right Click (on Windows), and select “Copy Path.” For an illustration of the process, please see the gif below:

      Gif of how to copy an image file path

      Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if you decided to publish the website online. Since the end goal is to create a publishable website, you will start using relative paths now when adding <img> elements to the document.

      You have also added the alternative text Sammy the Shark, DigitalOcean’s mascot using the alt attribute. When creating websites, alternative text should be added to all images to support site accessibility for individuals who use screen readers. To read more about using alternative text with HTML, please visit the section on alternative text in our guide How To Add Images To Your Webpage Using HTML.

      Save your index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser). You should receive a blank page with your image displayed:

      Small profile image displayed in browser

      If your image doesn’t display, check your code for errors and confirm that you have the correct file path for the image.

      Adding Styles To Images

      Now that index.html displays an image of Sammy the Shark (or the image of your choice), you’ll add a CSS rule to style the image. In your styles.css file, erase everything (if you’ve been following along the tutorial series) and add the following ruleset at the bottom of the document:

      styles.css

      . . .
      img {
        border: 2px solid red;
        border-radius: 8px;
        width: 200px;
      }
      

      Save your styles.css file and reload your index.html file in your browser. You should now receive an image with new style properties:

      Webpage with styled small profile image

      In this CSS rule, you have specified values for three different properties of the HTML <img> element. Let’s pause to examine each of the different properties and values:

      • The border property allows you to add a border to your image and specify the size, style, and color of the border. Notice that you can add multiple values for this CSS property. In this rule, you have specified a solid, red border with a width of 2px.

      • The border-radius property defines the radius of an element’s corners, allowing you to round the edges of an element. In this rule, you have specified 8 pixels as the size of the radius. Try changing this number to see how it affects the display of the image.

      • The width property defines the width of the image. In this rule, you have specified the width to be 200 pixels wide. Note that if you leave the height undefined, the height of the image will automatically adjust to maintain the original proportions of the image. Try changing both the height and width at the same time to check what happens.

      Exploring How Style is Applied To All Images

      Note that if you add any additional images to your HTML document, they will also have the same styling. To study how this works, add a second image to your index.html file using the HTML <img> element. (You can copy and paste the first <img> element if you don’t have a second image handy):

      index.html

      <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
      <img src="https://www.digitalocean.com/community/tutorials/images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
      

      Make sure to change the highlighted section with your image file path. Save your index.html file and load it in the browser. Your webpage should display two images styled with the same CSS ruleset for the <img> tag:

      Webpage displaying two images with the same style

      To continue exploring style possibilities for images, try changing the values in the CSS rule you just created in the styles.css file, saving the file, and reloading the index.html to check the results.

      Conclusion

      In this tutorial you explored how to style an image’s border size, color, appearance, height, width, and border radius. You will return to image styling when you begin building the demonstration website in the second half of this tutorial series.

      Now that you are familiar with how to apply a set of style rules to all <img> elements, you may be curious how to apply different style rules to individual or groups of <img> elements. In the next tutorial, you will create CSS classes, which allow developers to sort HTML elements into different classes for different CSS styling.



      Source link

      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://www.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://www.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