Scribd
Upload
17 views

How To Make Full-Screen Background Image Using CSS

The document describes how to make a full-screen background image using CSS. It explains how to create a div container and set its width, height, and margins to fill the screen. It also covers adding a border, including the border in the size using box-sizing, setting the background image and preventing repeats using background-repeat. Finally, it discusses using background-size and background-position to adjust the image to cover the full screen.

Uploaded by

imannurjaman44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

How To Make Full-Screen Background Image Using CSS

The document describes how to make a full-screen background image using CSS. It explains how to create a div container and set its width, height, and margins to fill the screen. It also covers adding a border, including the border in the size using box-sizing, setting the background image and preventing repeats using background-repeat. Finally, it discusses using background-size and background-position to adjust the image to cover the full screen.

Uploaded by

imannurjaman44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HOME YOUTUBE TWITTER SUBSCRIBE 

RELATED LINUX HINT POSTS


html

How to Make Full-Screen How to Justify Grid Items in


Tailwind?

Background Image Using CSS? How to Justify Items With


9 months ago • by Sharqa Hameed Breakpoints and Media Queries in
Tailwind?

In HTML, background images are used to style and enhance the look of the web pages.
How to Apply Hover on Grid Auto
By default, web page images are displayed in the upper left corner of the screen. Flow in Tailwind?
However, you can resize the image in full-screen mode. CSS provides “background-
position” and “background-size” properties that can be used to force an image to display How to Apply Hover on Row Grid in
Tailwind?
on the whole screen.

How to Apply Breakpoints and


In this manual, you will learn the method of adding a background image in full-screen Media Queries on Row Grid in
mode. Tailwind?

How to Apply Breakpoints and


Let’s get started! Media Queries on Column Grid in
Tailwind?

MY LATEST VIDEOS How to Make Columns Start or


End at the nth Grid Line in
Tailwind?
How to Make Full-Screen Background Image Using CSS?
To make the full-screen background using CSS, first, create a div and adjust its width and
height, and margin to make it appear on the full screen using the “width”, “height”, and
“margin” properties of CSS. Then, add a border around it by using the “border” property.
To set the border according to the screen, use the “box-sizing” property. Once it is done,
we will utilize the property of “background” to add the image in the background.

The syntax of the background property is:

background: background-image(url) background-repeat background-position/ background-


size

In the above mention syntax, the following four properties of the background property are
mentioned:
37 47 19 10
How to Set How to Center How to Blur a Darken Background CSS Ba
Background Image i… Background Images… Background Image i… Image CSS Image O

background-image: It is utilized to add an image as a background.


background-repeat: It is used to set the pattern of the repetition of the background
image, such as no-repeat, repeat horizontally, and repeat vertically.
background-position: It is used to adjust the position of the image, such as center,
left, and right.
background-size: It is used to set the size of the image, such as auto, cover, and
length.

Let’s move to the example in which we will make a full-screen background image using
CSS.

Example
In the HTML, we will create a container and set its class name as “div” and add the
heading using the <h1> tag. Moreover, to place the heading in the center of the page, we
will use the <center> tag.

HTML
<body>
<div class="div">

<center>
<h1>Welcome to LinuxHint</h1>

</center>
</div>

</body>

Then, assign the value of the margin property as “0” and height as “100px” to the whole
body of the HTML.

Replay

CSS
html, body {
margin:0;

height:100%;
}

In the next step, style the created container using “div” and adjust the width and height of
the div as “100px”. We will use border property to add the border around the div with
“25px” width, style as “groove” and color of the border as “rgb(184, 147, 147)”:
div {

width:100%;
height:100%;
border:25px groove rgb(184, 147, 147);

The outcome of the above-mentioned code is given below. You can see that the heading
and border are created:
Note: As you can see, in the above-provided image border from the right and bottom is
hidden, this is because the width and height of the div are already “100%”, so when we
add a border, additional width and height will be added. To avoid this, we will use the
“box-sizing” property of CSS as it allows us to include a border in the element’s width and
height.

To do so, we will set the value of box-sizing as “border-box” to include the border within
the total width and height of the div:

box-sizing:border-box;

The below-given image indicates that the border is successfully placed within the width
and height of the div:
Replay

Now, we will add the background image by using the “background-image” property and
specify the image url in it as “url(image.jpg)”:

div {
background: url("image.jpg");

}
In the below-provided image, you can see that the background image is successfully
added, but it is repetitive:

Replay
To avoid the repetition of the image, the “background-repeat” property is utilized. Here,
we will set the value of background-repeat as “no-repeat”:

div {

background-image: url("image.jpg");
background-repeat:no-repeat;

In the below-provided output, you can see that the repetition of the image is stopped;
however, the image is not displayed on the screen:
To display the image on full-screen, we will utilize the “background-size” property. And
set its value as “cover”, which means the image will cover the whole area of the created
container:

div {

background-image: url("image.jpg");
background-repeat:no-repeat;

background-size:cover;

The below image indicates that the image is displayed on the full screen and is cut off.
This is because the size of the image is greater than the div size:
To fix this problem, use the “background-position” property and set the position of the
image as “center”:

div {
background-image: url("image.jpg");

background-repeat:no-repeat;

background-size:cover;
background-position:center;

As a result, the selected image will be displayed in full-screen mode:


Replay

That’s it! We have explained the method to make a full-screen background image using
CSS.

Conclusion
To create a full-screen background image using CSS, first, create a div and set the width,
height, and margins to fill the screen. After that, create a border around the div, then add
an image to it using the “background-image” property. To adjust the image according to
the full screen, use the “background-repeat”, “background-size”, and “background-
position” properties. This article has explained the complete method to make the full-
screen background image using CSS.

-30%

Rp 1,3 JT Rp 1,3 JT Rp 1,2 JT


Produk 100% Asli
PSA

Explore More
search text SHOW ALL

37 47 19 10

How to Set How to Center How to Blur a Darken Background CSS Bac
Background Imag… Background… Background Imag… Image CSS Image O

ABOUT THE AUTHOR

Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold
masters degree in computer science and am passionate about learning and
teaching.

View all posts

Linux Hint LLC, [email protected]


1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Privacy Policy and Terms of Use

A RAPTIVE PARTNER SITE

You might also like