How Can I Zoom Background Image Using CSS And HTML

Posted By Bajarangi soft , Posted On 15-01-2021

Using CSS animation we can also zoom background image .So today we discuss how to do it.

How Can I Zoom Background Image Using CSS And HTML

Lets Start
Step 1:Create index.php and implement below html code in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How Can I Zoom Background Image Using CSS And HTML</title>
    <link rel="stylesheet" href="css/part2.css">
</head>
<body>
<div class="bg">
</div>
</body>
</html>

Step 2: Now Implement CSS code to zoom background image.

<style>
    html, body {
        height: 100%;
    }

    body {
        display: block;
        margin: 0 !important;
    }
    .bg {
        background-image: url("../image/kkkkkk.jpg");
        background-position: center center;
        background-repeat: repeat;
        background-attachment: fixed;
        background-size:  cover;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: auto;
        animation: scale 40s linear infinite;

    }
    @keyframes scale {
        50% {
            -webkit-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -ms-transform:scale(1.2);
            -o-transform:scale(1.2);
            transform:scale(1.2);
        }
    }
</style>

Complete Code For Zooming background image using css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How Can I Zoom Background Image Using CSS And HTML</title>
    <link rel="stylesheet" href="css/part2.css">
</head>
<style>
    html, body {
        height: 100%;
    }

    body {
        display: block;
        margin: 0 !important;
    }
    .bg {
        background-image: url("../image/kkkkkk.jpg");
        background-position: center center;
        background-repeat: repeat;
        background-attachment: fixed;
        background-size:  cover;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: auto;
        animation: scale 40s linear infinite;

    }

    @keyframes scale {
        50% {
            -webkit-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -ms-transform:scale(1.2);
            -o-transform:scale(1.2);
            transform:scale(1.2);
        }
    }
</style>
<body>
<div class="bg">
</div>

</body>
</html>