Crop image set as background without stretched

Question

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?

Dynamically generate post so i use php also but this error is on css. — Riddhi Busa, Feb 24 '16 at 08:32
check this out http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped — rasso, Feb 24 '16 at 08:46

score 1 · Accepted Answer · answered Feb 24 '16 at 08:44

1

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;
}

answered Feb 24 '16 at 08:44

Shandy Ardiansyah

132
4

score 0 · Answer 2 · answered Feb 24 '16 at 08:39

0

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

answered Feb 24 '16 at 08:39

ketan

19,129
42
60
98

Crop image set as background without stretched

2 Answers2