How to add a background image in CSS?
Hello, friends welcome to the topfaida.com website. In this article/tutorial we are going to tell you about how to add background images in CSS. We will know what is CSS Background Property? How to apply and set CSS Background? And how you can add a background image to any element with its help. So let’s know about it.
What are CSS Background Properties?
CSS background properties are a very useful property, by using which we can make our webpage attractive, and by applying color or image to any HTML element or selector like class, ID, we can make it present and effective.
CSS Background Property can be used to set background images on web pages. We can also apply background for any particular element. By the way, the background is defined in the body element. Which works on the whole webpage.
There are many background properties in CSS that you can use according to your need. This article has been specially prepared to teach you CSS background.
Also Read: How do you insert a comment in a CSS file
List of the CSS Background Properties?
- background-image
- background-size
- background-position
- background-attachment
- background-repeat
- background-color
- background-origin
- background-clip
- CSS background – Shorthand property
Also Read: How Do You Insert A Comment In A CSS File
Add background image in css?
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url("https://dummyimage.com/600x400/000/fff.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>This code by topfaida.com </h1>
<p>How to add background image in css?</p>
</body>
</html>
Background-image Property Values
| Property Value | Description |
|---|---|
| url(‘path’) | The path of one or more images is set. |
| none | Default. The background image is not given. |
| initial | default value; is set. |
| inherit | The value of the parent element is set. |
Repeating Background Image
If the size of your background image is small and you want to cover the entire background, then you can use the background-repeat property.
With this property, you can repeat the image horizontally, vertically, or on both sides. The background-repeat property has four values which are as follows.
Also Read: How to link CSS to HTML with 3 methods?
- Repeat – With this, you can repeat the image both horizontally and vertically on the side.
- no-repeat – With this you cannot repeat the image.
- repeat-x – With this you can repeat the image horizontally.
- repeat-y – With this you can repeat the image vertically.
Also Read: Which Is The Correct CSS Syntax?
background-image property
With the background-image property, you can put an image in the background of an element or an entire webpage. If the background image is to be applied to the entire webpage, then the background-image property has to be set for the body tag.
And if a background image is to be placed in an element such as <div>, <h1> or <p> tag, then the background-image property will have to be set for that element.
Also Read: Which CSS property controls the text size?
To give the background image, the full path of the image is written inside the URL attribute. For example, URL(‘https://dummyimage.com/600×400/000/fff.jpg’) |
Example
<!doctype html>
<html>
<head>
<style>
.div1{
background-image : url('https://dummyimage.com/600x400/000/fff.jpg');
}
</style>
</head>
<body>
<div class="div1">
<p> This Is A Paragraph </p>
</div>
</body>
</html>See in the output, we have put a background image on the div tag and set the background color of the whole website to green.
Also Read: How to center in css | how to center a div inside a div
Background-repeat
When a background image is placed on a webpage, it is set according to its size and covers the rest of the space by repeating it. Whether to repeat the image with the background-repeat property or not and if you want to do so, you can set it horizontally or vertically.
The value of the CSS background-repeat property is.
- repeat– This is the default value of background-repeat so that the background-image is shown by repeating.
- no-repeat- This value does not repeat the background-image. The image will appear only once.
- repeat-x- With this value, the background-image will repeat but horizontally, that is, the image will repeat from left to right.
- repeat-y- With this value, the background-image will repeat vertically i.e. the image will repeat from top to bottom.
- space – With this value, the background image will repeat but will repeat with a little space.
- round- With this value, the background image will repeat throughout the page, but it will appear slightly stretched from its original size.
Background-position
The position of the background image is set with the background-position property. The values of these properties are:
Also Read: Is CSS a programming language
- left top
- left-center
- left bottom
- right top
- right-center
- right bottom
- center top
- center center
- center bottom
From these values, there will be the position of the background image, you will be able to understand it by looking at the image below.
The background-position can also be set to % (x%y%) or pixel value (xpos ypos).
Background-attachment
When we are viewing a webpage or reading the content written in it, and scroll down as we go down. Then the background image along with the content also starts scrolling. With the background-attachment property, the background image can be scrolled along with the content or can be kept fixed.
Also Read: How to add CSS in HTML?
The value of the background-attachment property is:
- scroll- This value scrolls along with the background-image, page. And this is the default value of background-attachment.
- fixed- With this value the background-image becomes fixed. And when the user scrolls the page, the background image does not scroll.
- local- This value scrolls with the background-image, content.
The scroll and fixed properties are used with the background image in the body tag. And the local property is used with the background image in the container tag.
Example
Also Read: in css what does h1 can be called as
<style>
body{
background-image : url('https://dummyimage.com/600x400/000/fff.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>Background size property
You can set the width and height of the background image with the background-size property. And this value can be given by %(percentage) or pixel.
CSS background size can also be set with 3 more values and those values are:
- auto
- contain
- cover
Background-origin
From the background-origin property, we tell where to put the background image. When we put a background image on a webpage or inside a container. Then that image starts with the padding area ie the padding box.
Also Read: What is CSS explain it? and CSS example? | Types of CSS?
But you can change the beginning of the image from the background-origin. With this property, you can start the background image with the content or you can start with the border.
That’s why background origin has 3 values and they are:
- padding-box- This is the default value of background-origin. With this, the background image always starts from the padding area.
- border-box- With this value the background image starts from the border area.
- content-box- With this value the background image starts near the content.
Example
<!doctype html>
<html>
<head>
<style>
div{
width:200px;
height:150px;
margin:10px;
padding:10px;
border:5px dotted blue;
background-image : url('https://dummyimage.com/600x400/000/fff.jpg');
background-repeat : no-repeat;
display: inline-block;
background-size : cover;
color:white;
}
.div1{
background-origin : padding-box;
}
.div2{
background-origin : border-box;
}
.div3{
background-origin : content-box;
}
</style>
</head>
<body>
<div class="div1">
<p> This Is A Paragraph to describe background properties with background origin from padding area</p>
</div>
<div class="div2">
<p> This Is A Paragraph to describe background properties with background origin from border corner</p>
</div>
<div class="div3">
<p> This Is A Paragraph to describe background properties with background origin from content area</p>
</div>
</body>
</html>**Note: The background-origin property is only used to indicate the origin of the background image.
Background-clip
The background-clip property is used to tell the origin of the background image or background color. Its default value is border-box. The background-clip property works as a border origin property. But it works for both border-image and border color.
The values of background-clip are:
- padding-box– This allows the background image or background color to start from the padding area.
- border-box– With this, the background image or background color starts from the border area.
- content-box– With this, the background image or background color starts near the content.
Example
<!doctype html>
<html>
<head>
<style>
body{ background-color:cyan;}
div{
width:200px;
height:150px;
margin: 20px;
padding:20px;
border:5px dotted blue;
background-color : white;
background-repeat : no-repeat;
display: inline-block;
text-align:center;
}
.div1{
background-clip : padding-box;
}
.div2{
background-clip : border-box;
}
.div3{
background-clip : content-box;
}
</style>
</head>
<body>
<div class="div1">
<p> This Is A Paragraph to describe background properties with background clip from padding area </p>
</div>
<div class="div2">
<p> This Is A Paragraph to describe background properties with background clip from border corner</p>
</div>
<div class="div3">
<p> This Is A Paragraph to describe background properties with background clip from content area</p>
</div>
</body>
</html>Also Read: How To Link CSS To HTML With 3 Methods?
Background property shorthand
With the background property shorthand, all the properties of the background can be written in one line. And in this property, there is no need to write the property’s name, but the values of the properties are given in a sequence.
background property shorthand syntax
background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];*** While setting background it is not necessary that you give all the properties. Whatever properties you want to keep, you can set the background for the background by giving its values in the correct order.
Example
<!doctype html>
<html>
<head>
<style>
body{
background: url('https://dummyimage.com/600x400/000/fff.jpg') /* background-image */
left top / 300px 300px /* background-position / background-size */
no-repeat /* background-size */
fixed; /* background-attachemnt */
}
</style>
</head>
<body>
<div>
<h1>background image example</h1>
</div>
</body>
</html>Multiple background images
A new feature has been added in css3 so that more than one background image can be applied. For this, images and their URL are separated from, (comma) and written in background-image property.
Syntax:
{ background-image : url(‘image1’), url(‘image2’), url(‘image3’) };
In the background-image property, the sequence in which the URL will be written will be set one after the image AK. That is, image1 will be seen first, image2 behind it, and image3 behind it.
Example
<!doctype html>
<html>
<head>
<style>
body{
background-image : url('https://dummyimage.com/600x400/000/fff.jpg&text=image1'),
url('https://dummyimage.com/600x400/000/fff.jpg&text=image2'),
url('https://dummyimage.com/600x400/000/fff.jpg&text=image3');
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>How to set multiple background properties
You can apply multiple background images in CSS3 and in the same way you can also give different background properties for each background image. Like, more than one background image are written by separating them with, (comma). Similarly, other properties will be written by separating them from, (comma).
In the order in which you will give the URL of the background images, you will also give its other properties in the same order. That is, for the first background image, the other background properties given earlier will be applicable. And for the second background image, second-order background properties will be applicable.
Example
<!doctype html>
<html>
<head>
<style>
body{
background-image: url('http'),
url('');
background-position:left top, top center;
background-size: 300px 300px, 200px 200px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<div>
<h3>background image example</h3>
</div>
</body>
</html>
One thought on “How to add a background image in CSS?”