CODEWITHSUNDEEP
htmlcssimagebackgroundbackground-image
Riddhi Busa
Riddhi Busa

Reputation: 134

Crop image set as background without stretched

Crop image and set as background without stretched and background image should be 50% cover image and 50% gray background

HTML:

<div class="main">
<div class="inner-wrapper">
  //contain here

</div>
</div>

Css:

This .main class is background css property

    .main
    {
        width:1024px;
        margin:0 auto;
        background:url(event_cover_img.jpg);
        background-size:100%;
        background-repeat:no-repeat;
        background-color:#eceeef;
        padding-bottom:50px;
        box-shadow: 2px 2px 2px #969494;
    }
    .inner-wrapper
    {
        padding-top:150px;
        float:left;
    }

This image is wrong.

This image is right.

But image is starched so i need solution how it is solve?

Upvotes: 1

Views: 111

Answers (2)

Shandy Ardiansyah
Shandy Ardiansyah

Reputation: 132

you can try putting the image inside a pseudo class

.main::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    background:url(event_cover_img.jpg);
    background-size: cover;
}

Upvotes: 1

ketan
ketan

Reputation: 19341

Use background-size: contain; if you don't want to stretched the image.

Upvotes: 0

Related Questions