How do i crop an image using HTML and CSS? - html

Question

I would like to add an image to my website like in this example -> Cropped image
How do I crop the image? If i am using a .png image, i'm still seeing the black/white background. Is there a way to have only the man without the background using HTML & CSS?

Answer 1

Here is an easy way to crop any image before uploading. https://codepen.io/githyoung/pen/LYEjwdO
// Start upload preview image
$(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 150,
height: 200,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 150, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
label.cabinet{
display: block;
cursor: pointer;
}
label.cabinet input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
margin-top:-30px;
}
#upload-demo{
width: 250px;
height: 250px;
padding-bottom:25px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<label class="cabinet center-block">
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</div>
</div>
</div>
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>

Answer 2

If I understood correctly, you want to use a picture without any background.
for this, you should use a transparent png like this:
body{
background:lightblue
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
And if you want to add your voluntary color to the picture background like your sample:
img{
background: linear-gradient(45deg, #cb2d2d, #172aec);
}
body{
background:lightblue;
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
But if your picture isn't transparent, I think you must make it transparent on photoshop at first.

Answer 3

To my knowledge, there isn't a way of doing this through CSS or HTML. There is no inbuilt function to do this. So the only way to achieve this is by removing the background of the image by a third-party service like remove.bg or apps like photoshop etc.. (preferred to use Adobe Photoshop and use the pen tool, Magic wand tool or Quick selection tools for removing the external background of the image.) and then downloading it as a png and then uploading to your website.
Here I will mention some usefull softwares and websites for removing backgrounds, which are top rated and which maintains the quality of your image.
Adobe Photoshop
Canva
PhotoScissors
Wondershare PixCut
HitPaw Online Background Remover
Remove.bg
Once you get the png image, you can directly put it into your website. If you still see some white background altering over the image, use background-color: transparent.