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