1. Technology

Using CSS with Images

Style Your Images and Use Images in Styles

By

Many people use CSS to adjust text, changing the font, the color, the size and more. But one thing that many people often forget is that you can use CSS with images as well.

Changing the Image Itself

CSS allows you to adjust how the image displays on the page. This can be really useful for keeping your pages consistent. By setting styles on all images, you create a standard look for your images. Some of the things you can do:

  • Add a border or outline around the images
  • Remove the colored border around linked images
  • Adjusting the width and/or height of the images
  • Add a drop shadow
  • Rotate the image
  • Change the styles when the image is hovered over

Giving your image a border is a great place to start. But you should consider more than just the border — think about the entire edge of your image and adjust the margins and padding as well. An image with a thin black border looks nice, but adding some padding between the border and the image can look even better.

img {
  border: 1px solid black;
  padding: 5px;
}

It’s a good idea to always link non-decorative images, when possible. But when you do, remember that most browsers add a colored border around the image. Even if you use the above code to change the border, the link will override that unless you remove or change the border on the link as well. To do this you should use a CSS child rule to remove or change the border around linked images:

img > a {
  border: none;
}

You can also use CSS to change or set the height and width of your images. While it’s not a great idea to use the browser to adjust image sizes because of download speeds, they are getting much better at resizing images so that they still look good. And with CSS you can set your images to all be a standard width or height or even set the dimensions to be relative to the container.

Remember, when you resize images, for best results, you should only resize one dimension — the height or the width. This will enusre that the image keeps its aspect ratio, and so doesn’t look strange. Set the other value to auto or leave it out to tell the browser to keep the aspect ratio consistent.

img {
  width: 50%;
  height: auto;
}

CSS3 offers a solution to this problem with the new properties object-fit and object-position. With these properties you will be able to define the exact image height and width and how the aspect ratio should be handled. This might create letterboxing effects around your images or cropping to get the image to fit in the size required.

While the CSS3 object-fit and object-position properties are not widely supported yet, there are other CSS3 properties that are well supported in most modern browsers that you can use to modify your images. 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 then use CSS transitions to make the images change when hovered over, or clicked, or just after a period of time.

Using Images as Backgrounds

CSS makes it easy to create fancy backgrounds with your images. You can add backgrounds to the entire page or to just a specific element. It’s easy to create a background image on the page with the background-image property:

body {
  background-image: url(background.jpg);
}

Change the body selector to a specific element on the page to put the background on just one element.

Another fun thing you can do with images is create a background image that doesn’t scroll with the rest of the page — like a watermark. 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.

And CSS3 adds more styles for your backgrounds as well. You can stretch your images to fit any size background or set the background image to scale with the window size. You can change the position and then clip the background image. But one of the best things about CSS3 is that you can now layer multiple background images to create even more intricate effects.

HTML5 Helps Style Images

The FIGURE element in HTML5 should be placed around any images that can stand alone within the document. One way to think about it is if the image could appear in an appendix, then it should be inside the FIGURE element. You can then use that element and the FIGCAPTION element to add styles to your images.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. Beginning CSS
  6. CSS Tutorial
  7. Using CSS With Images - Web Design Modification

©2014 About.com. All rights reserved.