How-to articles, tricks, and solutions about IMAGE

How to Create an Image with Transparent Text Using CSS. Learn about the methods that can be used to overlay text on images. Try examples.

It turns out it is totally possible to create a simple CSS gallery without using Javascript. In this article we are going to show you how to do that with only HTML or CSS.

Learn how to create and style custom checkboxes and radio buttons. Also set custom images as checkboxes and radio buttons. See all with examples.

Do you want to get '90s vibes with just only CSS? This tutorial is just for you to create a Polaroid image effect for the website. Follow the steps and get examples.

If your Website contains lots of images and downloads slowly, read our snippet and learn to create thumbnail images, which will help you to solve this problem.

There are many ways of cropping and centering an image in CSS. Read and find examples with the background-image and object-fit properties, and the <img> tag.

In this snippet, we’re going to demonstrate how you can display Base64 images in HTML. Use the HTML <img> element to embed Base64 encoded image into HTML.

Read this tutorial and learn the two methods of getting the width and height of the image. Learn about the properties that help to get the image size.

Use CSS3 opacity property to make an image or a background transparent. Learn also how to change the opacity while hovering. All with examples.

Responsive images automatically adjust to display images based on the user’s device. Learn How to Make Images Responsive with CSS. Try examples.

Overlays can be a great addition to the image and create an attractive website. In this snippet, you can find different examples of overlaying images with CSS.

Sometimes, you may need to place one image over another one. It can be easily done with HTML and CSS. See how to use the position and z-index properties.

The background image is manipulated with the background-image property. But you may need to remove the background image, and we’ll show how it can be done.

Learn about the ways of resizing and creating responsive background images. Use the CSS background-size property for that purpose. See examples.

Learn how to resize images to have a responsive web design. Use HTML attributes or CSS width and height properties. See examples and practice the methods for yourself.

Learn about the ways of how to zoom images and background images, transform, zoom in, zoom out and other effects with examples.

In this snippet, we’ll show how you can set an equivalent of the “cover” value of the background-size property for the <img> tag. Use the object-fit property.

In this snippet, you can find the solution of setting the equivalent of “src” attribute of an <img> tag. For that, use the content or background-image properties.

Learn How to Set the Size of the Background-image. Use the background-size property. In this snippet, we’ll show you how to do that with examples.

Learn the ways of styling and have attractive horizontal lines: how to change color and size, set images as horizontal lines and a pack full of various kinds of <hr> examples.

Style comment boxes, change the background color, add a background image or set borders to your comment box. See all with examples.

In this snippet, we’ll show how you can turn a rectangular image into a cropped square. We’ll use CSS and turn an image into a square without distorting it.

In this snippet, we will demonstrate some techniques of vertically aligning an image within an HTML <div> element with responsive height. Read and try examples.

Read this tutorial and learn detailed information about some simple and fast techniques that are used to decrease image loading time using JavaScript.

In PHP, you can output an image using the built-in function header() to set the content type to an image format and the readfile() function to read the image file and output its contents.