By using the background-image CSS property, you can insert and display an image in your HTML.
In this WEBCAMP MEDIA, we will explain how to insert an image with CSS, how to adjust the position, and how to trim it.
- How to insert an image with background-image
- To change the position of the image
- To crop the image
- Checkpoints when images are not displayed
I will explain the above items.
By reading this article, you can understand how to display images on the website screen using CSS. It also explains how to change the position of the image with CSS and how to trim it, so be sure to check it out!
Table of contents
- How to insert an image with CSS
- How to adjust image position with CSS
- How to adjust the position of the image displayed in HTML with CSS
- How to center an image with CSS
- How to adjust the position of the image displayed by background-image
- How to adjust the position of the image displayed in HTML with CSS
- How to crop an image with CSS
- Crop a specific part of the image with overflow
- How to crop the center of an image with object-fit
- What to do when background-image is not displayed with CSS
- summary
How to insert an image with CSS
To insert an image in HTML using CSS, use the background-image property.
The background-image property is a type of CSS property that allows you to add a background image or background color to a specified HTML element.
The usage of the background-image property is as follows.
Specify the url function for the value and enter the path to the image.
By inserting an image with the background-image property, you can insert an image into the background of the top screen to achieve a stylish design.
How to display an image in the background with background-image will be explained in detail using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title></title>
<style>
body, p{
margin:0;
}
.container{
background-image: url(./pic/test.png);
background-repeat: no-repeat;
}
.container p{
width:100%;
height:100vh;
color:white;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
</body>
</html>The image inserted with background-image is displayed only within the range of the specified element.
By specifying “height:100vh;” in the p tag, it is possible to expand the element to the height of the screen.
Also, if you specify “width: 100%;” and the width of the image is smaller than the screen width, the image will be displayed repeatedly.
“background-repeat: no-repeat;” is specified to prevent repeat.
Execution result
How to adjust image position with CSS
I will explain how to adjust the position of the image specified in HTML and the image specified in background-image with CSS.
How to adjust the position of the image displayed in HTML with CSS
Use the position property to adjust the position of the image specified in HTML with CSS.
The position property is a method of determining the reference position and placement position to place an element anywhere.
The element for which “position:relative” is specified becomes the reference to move, and “position:absolute;” becomes the position to move.
I will explain how to adjust the position of the image with CSS position using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title></title>
<style>
body{
margin:0;
}
.container{
background-color: rgb(176, 176, 241);
height:300px;
width:300px;
position: relative;
}
.img{
position: absolute;
top:100px;
left:50px;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<img src="pic/icon.png">
</div>
</div>
</body>
</html>Specify “position: relative;” in the container class as a reference value when moving the element.
Specify “position: absolute;” in the img class you want to adjust the position, and position the element with top and left.
How to center an image with CSS
You can use the CSS position property to center the image in a specific range.
Here’s the code to center it:
.img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}Specify 50% for top and left to place it 50% from the top left.
Then, it will be placed in the lower right half of the element size from the center, so you can place it in the center by returning it to the upper left half of the element width (-50%) with the translate function.
Execution result
You can read more about position in CSS in the article below .
How to adjust the position of the image displayed by background-image
To position an image with background-image, use the background-position property.
The background image defaults to the top left of the specified element, but background-position allows you to move the image anywhere from the initial position.
The input method of background-position is as follows.
It is also possible to specify the value bottom if you want to place from the bottom of the element, and right if you want to place from the right.
The sample code explains how to actually adjust the position of the image using background-position.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title></title>
<style>
body{
margin:0;
}
.container {
background-position: left 100px top 100px;
background-image: url(./pic/icon.png);
background-repeat: no-repeat;
height: 300px;
width: 300px;
background-color: rgb(181, 181, 243);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>An image is specified in the container class, and the background-position is positioned 100px from the top and left.
Execution result
How to crop an image with CSS
There are two ways to crop an image with CSS: using the overflow property and using the object-fit property.
I will explain each trimming method.
Crop a specific part of the image with overflow
overflow is a CSS property that sets how to handle content that doesn’t fit inside the element.
This time, crop the image by specifying “overflow: hidden;” to hide the protruding elements.
I will explain how to trim with “overflow: hidden;” with sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title></title>
<style>
body{
margin:0;
}
.cut {
overflow: hidden;
width: 150px;
}
img{
width:300px;
}
</style>
</head>
<body>
<div class="cut">
<img src="./pic/test.png" alt="">
</div>
</body>
</html>“Overflow: hidden;” is specified in the cut class, which is the parent element of the img tag, and the trimming size is determined by width and height.
The width of the cut class is 150px and the width of the image is 300px, so the image is cropped in half.
Execution result
How to crop the center of an image with object-fit
object-fit is a CSS property that allows you to set the display method for images, videos, etc.
If you specify the value cover for object-fit, you can crop the part that protrudes from the parent element of the image while maintaining the aspect ratio based on the center of the image.
The sample code explains how to crop an image with object-fit.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title></title>
<style>
body{
margin:0;
}
.test img {
width: 300px;
height: 300px;
object-fit: cover
}
</style>
</head>
<body>
<div class="test">
<img src="./pic/sp.jpg" alt="">
</div>
</body>
</html>The image specified in the img tag is displayed at 300px vertically and horizontally, and if only the width and height are set, it will be stretched vertically and horizontally as shown below.
If you specify “object-fit: cover;” here, you can trim it to 300px vertically and horizontally while maintaining the aspect ratio.
Execution result
What to do when background-image is not displayed with CSS
When the image is not displayed even if you specify the image using background-image, the points to check are as follows.
- Is your CSS loaded correctly?
- Is the path to the image correct?
- Are the height and width of the element set?
- Is it not overridden by !important?
First, use a validation tool to check that your CSS is spell-free and loaded correctly. At that time, let’s check whether the specified image has been overwritten by another style with !mportant.
The path to the image is the path to the image specified in the URL specified for background-image. It is often not displayed because the path is wrong, so let’s check it.
The path is explained in detail in the article below.
The size of the image displayed by background-image depends on the size of the specified element. If the image is not displayed, set the width and height to the specified element and check the display result.
summary
This time, I explained how to insert an image with CSS, how to adjust its position, and how to trim it.
You can insert an image using the CSS background-image. Since it can be used as the background image of the top page and the background image of each content, it will expand the design range of the website.
Also, the width of the image depends on the size of the specified HTML element, so check the size of the specified element when using it.
