0

The image itself is 6024x4024. i can hide the overflow but it seems i cant get it to show the full image in the container. what im seeing is that its zoomed in on the picture.

.section1{
    background-image: url(section1.jpg);
    height: 600px;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}
<section>
    <div class="section1">

    </div>
</section>
3

2 Answers 2

0

Try this. background-size:contain;

<html>

<head>
    <title>Javascript</title>
    <style>
        .section1{
    background-image: url('../Downloads/1.jpg');
    height: 600px;
    width: 100%;
background-size:contain;
}
    </style>
</head>

<body>
    <section>
        <div class="section1">

        </div>
    </section>

</body>

</html>
0
.section1{
    background-image: url(section1.jpg);
    height: 600px;
    width: 100%;
    overflow: hidden;
    object-fit: contain;
}

Change the object-fit to contain it will show entire image.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.