Published on

Set Image Transparency in your site images with CSS

Authors

Set Image Transparency in your site images with CSS

Have you ever tried to make an image background transparent but were unable to and/or spent an eternity trying to get it right? Well, in this guide we are going to show you how to make a background transparent in your site images with CSS.

First things first, what is image transparency?

With an image or graphic, transparent refers to an image that is clear and can take the effect of any images behind it. Basically, a transparent image is a picture where some part of the image is see-through, like the image has been cut out. This is useful because transparent images look much better when combined with other images, allowing you to see the background or other items behind the picture.

Almost all image editors used today are capable of making an image transparent, so, if you're having trouble making one, note that the JPG or JPEG image format does not support transparency, which is why it’s important that when creating a transparent image, you use GIF or PNG.

What is a transparent image called?

A picture with a transparent background is also called PNG. A PNG is an image file type that allows saving the image with a transparent background. Most images cover a certain number of pixels and have color in all of those pixels, even if that color is white. A transparent background has nothing in the background pixels, allowing what’s behind it to show through.

Does PNG, JPG and GIF have transparency?

As seen before, JPG or JPEG image formats do not support transparency and when they are compressed they lose image quality.  That being said, JPGs are a common choice for images on websites because they have a relatively small file size and this helps your website to load faster and without problems.

Another commonly used option is a GIF. GIF files can have transparent backgrounds, but they only allow one color to be specified transparently, while PNGs have better transparency options.

When choosing between PNG, JPG or GIF, PNGs are a better choice when you need a transparent image because not only is the compression lossless, meaning there is no loss in quality each time it is opened and saved again, but PNG also handles detailed, high-contrast images well.

Does PNG, JPG and/or GIF affect the page loading speed?

On average images make up 21% of a total website's weight. Done right, images can make a website look fantastic. Done wrong, and your website's load speed will be off the chart. That’s why image optimization is crucial (see this article on how to optimize images to boost page speed and appearance). When optimizing images, your site loads faster and your SEO will benefit.

Many people wonder if using PNG, JPG or GIF affects the speed of your site, so, what file format should I save my image in?

  1. PNG: expect a higher-quality image but a larger file size. Best for logos, text heavy/graphic designs, screenshots and anything that requires a transparent background.
  2. JPEG: you’ll probably save images as a jpeg the most. Best for photography, lifestyle images, product shots. As photos contain a wide variety of colours and natural variations, the loss in quality is usually unnoticeable to the human eye.
  3. GIF: if you need to add an animation go for GIF.

How do I make an image transparent?

Now that you know what image transparency is and how PNG, JPG and GIF come into play, you need to know how exactly to make an image background transparent. As seen above, you can create a transparent area in most images with almost all image editors. But here, we’re going to show you how to make the background of an image transparent with CSS.

What is CSS?

CSS is the language we use to style a web page, it stands for “Cascading Style Sheets”. CSS describes how HTML elements are to be displayed on screen, paper, or in other media,it can control the layout of multiple web pages all at once. It’s basically a language for specifying how documents are presented to users (how they are styled, laid out, etc.). It can be used for very basic document text styling, for example, changing the color and size of headings and links and it can also be used to create layout!

Create a transparent image with CSS:

As of CSS3 we have an "opacity" property that we can use to clarify and give the effect of transparency to the images on a website. Below we are going to show you exactly how to create a transparent image with CSS.

Here is a normal picture:

https://lh6.googleusercontent.com/f6wn1AJJg6ESW4aBER7aQOhjYfhq8wjxIY1fhbUN3l8KrWgArEjrrc2-o6nxIX44DSvOss5ankaZF5w1Heo7INh_r6S_RhO5rLRM1pN47x8Hh2Drer0A7-H1UyDEASPwDGLY0g7M

And here is the same picture but with transparency:

https://lh3.googleusercontent.com/MwoUagBl030iHoesMXpfAuBtEspoez3Ok0VIfoXbMxl0-jYgE3_ngEhWMIGULhU30qtRoTpskZdHPN037zIJGXW4101eUYiccs5ndgWoClKylOLlAL3_Ddp-AYH6fi2p9vmaDpeB

Consider the following CSS:

img {
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}

We could make the hover effect show transparency of the image or not in the following way:

img {
  opacity:1;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}
img:hover {
  opacity:1.0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}

In the previous example we added what should happen when a user hovers over one of the images. In this case, we want the image to not be transparent when the user passes over it.

The CSS code for this is: opacity = 1.

IE8 and earlier versions: filter: alpha (opacity = 100).

When the mouse pointer moves away from the image, the image will be transparent again.

NOTE:****

There’s no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn’t exist for the background-image property.

To fix this issue, you need to put the background image into a child element of the parent. This will ensure that the background image and the text content will be on their own “layer” in the parent. You can then control each layer’s opacity without affecting each other. One approach you can use is to put the background-image styles in a pseudo-element of the parent element.

In other words, you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}
div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

Other transparent image editing programs:

  1. Adobe Photoshop.
  2. Canva.
  3. Snappa.
  4. Lumina.
  5. InPixio.
  6. Background eraser.

In conclusion,

As you have probably realized by reading this article, creating an image with a transparent background isn’t as hard as it may have seemed and it actually plays a huge role in image optimization and, therefore, the loading speed of your website and, by consequence, the user interaction with it.

We hope this guide helped and answered your questions on CSS and transparent backgrounds on your website’s images.

If you feel like learning more about creating the best atmosphere for your website, read this article on The Most Complete Guide for Image Optimization