Introduction to CSS Background Image
CSS Background Image is defined as a CSS property to set background images for an element.The image can be applied as graphics or gradient of an element. This property is assigned inside an HTML page and can be done to block elements and inline. The core benefit of this property is it allows to place additional HTML content on top of the page like headings and also provides layering capabilities so that we have an option to add other image and text content as well within the same available space.
Syntax:
background-image: url|none|initial|inherit;The background image takes four parameters:
URL: Using an image in the page is pretty simple by using url() value which provides a file path of an image. We can also set URI for the url().
How to Add Background Image in CSS using Various Methods?
Let’s see how the background image includes some methods in an HTML.
1. Using Inline CSS: The easiest and robust method is this one which uses background-image property with <div> element.
2. Using Embedded CSS: It is referenced using class or Id part.
Background images could be performed using properties like:
- background-repeat: This method comes along with background-image and specifies how the background image should repeat or not. It takes some possible values like no-repeat (doesn’t repeat the image), repeat-x(tiles the image horizontally), repeat-y(tiles the image vertically).
- background-position: This ultimately specifies the position of the background image to be located with the values to be taken like a top, bottom, right, left, centre and the combinations of these values (ex: left bottom). The horizontal and vertical values could be combined by any needs.
- background-size: It specifies the size of the image to be placed and allows to have control of the size. Following are the values to be assigned for the background-size:
- auto: It’s a default value size.
- length: it allows to specify the width and height of an image in pixels (10 px 30px).
- cover: Zooming the background image completely by which an area of an element is covered with the entire background image avoiding some parts of the image by scaling it.
- Percentage: Specifies the width and height of an image in percentage. (10 % 30%)
- Centre: image to be placed in the centre.
Background images cannot be any static images we can also provide movement images like animated gifs too.
Examples to Implement CSS Background Image
Below are the example of CSS Background Image:
Example #1
This example sets the background image completely.
Code:
back.html
<html>
<head>
<style>
body {
background-image: url(background.jpg);
background-color: coral;
}
</style>
</head>
<body>
<h1>Demo on CSS. Welcome to our Page!</h1>
</body>
<html>Output:
Same code with altering the height and width of the image. The original image is diminished in the page according to the specification. here is the code that sets to the defined pixels.
Code:
ff.html
<body>
<div class="dem1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTvK7BPIGljz1jLknJfmvGyNmiXktGdry3SUg&usqp=CAU" class="dem2">
</div>
</body>Code:
ff.css
.dem1{
width:900px;
height:300px;
margin:auto;
}
.dem2{
width:50%;
height:80%;
}Output:
Example #2
Setting two background Images.
Code:
<html>
<head>
<style>
body {
background-image: url(tenor.jpg), url(paper.jpg);
background-color: coral;
}
</style>
</head>
<body>
<h1>Demo on CSS. Welcome to our Page!</h1>
</body>
<html>Output:
Example #3
Specifying background requires image property, size like how we specified under #bg1 class. And providing CSS part on body covers the full HTML code to fit in the window screen.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#bg1 {
border: 1px solid black;
padding: 20px;
background: url(wind.png);
background-repeat:no-repeat;
background-size: auto;
}
#bg2 {
border: 1px solid black;
padding: 20px;
background: url(wind.png);
background-repeat: no-repeat;
background-size: 500px 200px;
}
</style>
</head>
<body>
<h2>background-image demo using Size Property</h2>
<div id="bg1">
<h2>This is my Web Page</h2>
<p>The original size is set to the background</p>
</div>
<h2>Example specifying the Width</h2>
<div id="bg2">
<h2>Here is my next page</h2>
<p>Well, the dimensions are specified here</p>
</div>
</body>
</html>Output:
Example #4
Setting a full-size background with the position.
Code:
<!DOCTYPE html>
<html>
<head>
<h1> Full Background image </h1>
<meta name="viewport" content="width=device-width, initial-scale=1.1">
<style>
body, html {
height: 100%;
margin: 1;
}
.full {
background-image: url("harry.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="full"></div>
<p>This demo shows full-height image by setting the container and scaling them perfectly to the screen</p>
</body>
</html>Using CSS we have to fit the image into the screen by setting the property size to cover.
Output:
Example #5
Using Exact Aspect ratio with Border property
Code:
fit.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js">
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div></div>
</body>
<h1> With the exact Aspect Ratio </h1>
</html>Code:
.css
div {
width: 100%;
height: 250px;
background-image: url('https://www.cityam.com/wp-content/uploads/2020/02/London_Tower_Bridge_City.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 2px solid yellow;
}So by the, is an original image is not blurred while scaling the images to fit the area. Here is the result for the above code.
Output:
Example #6
Adding text cover over the background image.
Code:
fit.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an HTML PAge with Background Image</title>
<style>
body {
font-family: "Calibri", cursive;
font-size: 14px;
color: #036;
}
h1,h2,h3 {
font-family: Arial,Comic Sans MS, sans-serif;
font-size: 14px;
font-weight: bold;
}
html {
background: url(harry.jpg) no-repeat centercenter fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#desk { width: 500px; margin: 40px auto; padding: 22px; background: white; -moz-box-shadow: 0 0 22px black; -webkit-box-shadow: 0 0 22px black; box-shadow: 0 0 22px blue; }
</style>
<head>
<body>
<div id="desk">
<h1>Creating an HTML PAge with Background Image</h1>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong> {<br />
background: url (harry.jpg) no-repeat centercenter fixed;<br />
-webkit-background-size: cover;<br />
-moz-background-size: cover;<br />
-o-background-size: cover;<br />
background-size: cover;<br />
}<br />
scales entire Background. <br />
</div>
</body>
</html>Output:
Conclusion
Therefore, in this tutorial, we have seen a simple way to code an image using CSS also we have learnt how that image fit the screen. Background image with CSS provides good features to the websites and the web designers feel good in their themes. So, at the end of this section, you will be able to customize the works with good effort.
Recommended Articles
This is a guide to CSS Background Image. Here we discuss a brief overview on CSS Background Image and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
