Published on

Hacks to style your website images with CSS

Authors

In a recent article we explained what is image transparency, what is CSS and exactly how to create a transparent background on an image with it. But, here we’re going to show you how to style your website images with CSS.

The main goal of this article will be to list the different commands in CSS to carry out the main actions like how to center an image with CSS, sizing images, covering backgrounds with images, etc.

First things first, what is a CSS image?

The CSS data type <image> represents a 2D image. There are two types of images in CSS: flat static images (usually referenced using a URL), and dynamically generated images (such as gradients or renderings of parts of the tree).

CSS can handle different types of images:

  1. Images with intrinsic dimensions, aka, their natural size (such as a jpeg image that has fixed dimensions).
  2. Images with various intrinsic dimensions, which coexist in different versions within a file (like some .ico formats).
  3. Images without intrinsic dimensions, but with an intrinsic aspect ratio between their width and height (like some vectorized images, in SVG format, for example).
  4. Images without intrinsic dimensions or intrinsic aspect ratio (like a CSS gradient, for example).

CSS determines the specific size of the object using these intrinsic dimensions, the specific size in CSS properties such as width, height or background size, and the default size of the object defined by the property type (later explained) with which the image is used.

The specific size of the object is calculated using the following algorithms:

  • If the specific size defines both width and height: these values are used as the specific size of the object.
  • If the specific size defines only width or only height: then, the missing value is determined using the intrinsic aspect ratio, the intrinsic dimensions, or, using the default object size for that missing value.
  • If the specified value does not define width or height: the specific size of the object will be calculated to match the intrinsic aspect ratio of the images, but without exceeding the default size in any of its dimensions. If the image does not have an intrinsic aspect ratio, that of the object to which it is being applied will be used; if the object has none, the missing width or height will be taken from the default size of the object.

Can JPEG be used in CSS?

As we saw above, CSS can handle different types of images, and inside those that it can handle, a jpeg image that has fixed dimensions is one of them. Here is an example:

body {
  background-image: url("paper.jpeg");
  background-color: #cccccc;
}

How do I style an image in CSS?

  • CSS allows you to adjust how the image displays on the page, and this can be really useful for keeping your page consistent. By setting styles on all images, you create a standard look for your images, which gives it an overall aesthetically pleasing, and professional, look.

Here are some of the things you can do: add a border or outline around the images; remove the colored border around linked images; adjust the width and/or height of the images; add a drop shadow; rotate the image; change the styles when the image is hovered over, etc.

There are other CSS3 properties that are well supported in most browsers that you can use to modify your images as well. Things like drop shadows, rounded corners, and transformations to rotate, skew, or move your images all work right now in most modern browsers. You can also then use CSS transitions to make the images change when hovered over, clicked, or just after a period of time. Also, here is an article on how to use responsive images with CSS Background srcset.

How to center images:

Instead of using text-align to center an image, you should tell the browser explicitly that the image is a block-level element. This way, you can center it as you would any other block. Here is the CSS to make this happen:

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

And for support in HTML5, use a style attribute with the value text-align:center inside of a block-level element; such as a <p> tags.

Vertical alignment works similarly to horizontal alignment. The CSS property is vertical-align, like so:

.vcenter {
  vertical-align: middle;
}

How to change image size:

We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.

The resize image property is used in responsive webs where the image is resizing automatically to fit the div container. The max-width property in CSS is used to create a resize image property. The resize property will not work if the width and height of the image is defined in the HTML. The syntax for this is:

img {
  max-width:100%;
  height:auto;
}

Width can also be used instead of max-width if desired. The key is to use height:auto to override any height=”…” attribute already present on the image.

The height attribute specifies the height of the <input> element and it is used only with <input type="image">. A tip is to always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.

How to use images as backgrounds:

You can add backgrounds to the entire page or to just a specific element and, luckily, it’s easy to create a background image on the page with the background-image property (it sets one or more background images for an element). For this, you just need to change the body selector to a specific element on the page to put the background on just one element.

Here is an example for setting one background image for the <body> element:

body {
  background-image: url("paper.gif");
  background-color: #cccccc;
}

And here is an example for setting two background images for the <body> element:

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

Another thing you can do with images is to create a background image that doesn’t scroll with the rest of the page. For this, you just use the style background-attachment: fixed; along with your background image.

Other options for your backgrounds include making them tile just horizontally or vertically using the background-repeat property. Write background-repeat: repeat-x; to tile the image horizontally and background-repeat: repeat-y; to tile vertically. And, you can position your background image with the background-position property.

Tip: the background of an element is the total size of the element, including padding and border (but not the margin). And another tip is to always set a background-color to be used if the image is unavailable.

How to style images:

For rounded images, use the ****border-radius property.

An example for a rounded image is:

img {
  border-radius: 8px;
}

And an example for a circled image is:

img {
  border-radius: 50%;
}

For thumbnail images, use the border property. Use an <img> element and wrap an <a> element around it. Below is an example.

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

For polaroid images or cards;

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {
  width: 100%
}

div.container {
  text-align: center;
  padding: 10px 20px;
}

For a transparent image, the opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent;

img {
  opacity: 0.5;
}

For image filters, the CSS filter property adds visual effects (like blur and saturation) to an element. An example to change the color of all images to black and white (100% gray) is:

img {
  filter: grayscale(100%);
}

To flip an image;

img:hover {
  transform: scaleX(-1);
}

In conclusion,

As you can see, there are multiple things you can do with CSS to give your images on your website a more dynamic and professional look, and it is not hard! We hope this guide helped ease your worries and make the use of CSS on your images easier :)

Also, if you are looking to further your knowledge on CSS, here is an article on CSS Breakpoints: How to use them to create responsive websites