2 min read

Adding an image of any size to your website can be done in a few simple steps.

You can copy the HTML and CSS below. All you need is to add an image of your own.

The below example is good for areas if you are adding multiple different sized images to the same area.

It is always best to scale the images down to the correct size, however that is not always feasible.

HTML

<div class=”outer-image”>
<div class=”inner-image” style=”background-image:url(link-to-your-image-here.jpg);”>
</div>
</div>

You could also add the background image in your CSS as well, however it is easier to add inline if the image will be dynamic/need to be updated in a CMS.

CSS

If you would like more of the image to show, you will need to increase the padding in the outer-image class.

.outer-image {padding:33%; position: relative}
.inner-image {position: absolute; top: 0;left: 0;right: 0;bottom: 0;background-position:center;background-size: cover; width: 100%;background-repeat: no-repeat;}