ADVERTISEMENT
ADVERTISEMENT

How to set background image size using CSS?

Here, we are going to learn about setting an image in the background – how to set background image size using CSS?
Submitted by Anjali Singh, on January 19, 2020

Introduction:

As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role in indulging users to websites or web pages. The images are a very smart way to represent any piece of information through colors and art.

Now that we know the importance and necessity of the images, why don’t we think about the topic at hand which is how can we set the background image size using CSS on our website or web page and to answer that curiosity, keep reading!

Method:

To set the background image size the background-size property of CSS is used.

Syntax:

    Element{
        background-size:auto|length|cover|contain;
    }

Values:

Now that we have a basic idea of this property and how it helps in resizing the image on our website or web page, so let us keep moving forward in this article and get to know about the different values about this property.

This property contains 4 values to the background-size property and is listed below,

  1. auto
  2. length
  3. cover
  4. contain

Let us discuss these properties one by one.

1) background-size:auto

The auto value of the background-size property is useful to display the original size of the image in terms of length and width. It is also the default value.

Syntax:

    Element{
        background-size:auto;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            padding: 25px;
            background: url(img_forest.jpg);
            background-repeat: no-repeat;
            background-size: auto;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1> Background image size</h1>
    <div>
        <h2>Hello World</h2>
    </div>
</body>

</html>

Output

CSS | set background image size | Example 1

In the above example, auto property value is used.

2) background-size:length

The length value of the background-size property is useful to display the width and height of the image by the user’s choice. The first value is used to set the width and the second is used to set the height of the image.

Note: If only one value is given, the second is set to auto by default.

Syntax:

    Element{
        background-size:width height;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            padding: 25px;
            background: url(img_forest.jpg);
            background-repeat: no-repeat;
            background-size: 600px 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1> Background image size</h1>
    <div>
        <h2>Hello World</h2>
    </div>
</body>

</html>

Output

CSS | set background image size | Example 2

In the above example, the width and length of the image are defined.

3) background-size:cover

The cover value of the background-size property is useful to resize the original size of the image in terms of length and width to cover the entire container. It can also stretch or cut the image to cover the entire container if needed.

Syntax:

    Element{
        background-size:cover;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            padding: 25px;
            background: url(img_forest.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1> Background image size</h1>
    <div>
        <h2>Hello World</h2>
    </div>
</body>

</html>

Output

CSS | set background image size | Example 3

In the above example, the image is cut to fit the container.

4) background-size:contain

The contain value of the background-size property is useful to resize the original size of the image in terms of length and width to make sure the image is fully visible to the user.

Syntax:

    Element{
        background-size:contain;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            padding: 25px;
            background: url(img_forest.jpg);
            background-repeat: no-repeat;
            background-size: contain;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1> Background image size</h1>
    <div>
        <h2>Hello World</h2>
    </div>
</body>

</html>

Output

CSS | set background image size | Example 4

In the above example, the image is fully visible to the user with the help of background-size: contain.

CSS Tutorial & Examples »


ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.