Background image is cut - html

Question

When I put an image as background the image is cut, here's an example:
http://midanew.wpengine.com/
Look at the first big image (with the screaming people), now scroll down until you see the same picture only with their hands, since the picture is cut.
The two pictures are the same. Why the seconds picture is cut and how can I make the pictures to look the same?
The code for the first picture:
<div class="col-sm-8">
<?php
$attachment_id = get_field('rectangular_image');
$main_post_img = wp_get_attachment_image_src( $attachment_id, 'full' );
if ( $attachment_id ){ ?>
<img src="<?php echo $main_post_img[0] ?>">
<?php
}else{ ?>
<a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a>
<?php }?>
</div>
And the second one:
$first_special_img_id = get_field('rectangular_image');
if ( $first_special_img_id )
$first_special_img = wp_get_attachment_image_src( $first_special_img_id, 'full' );
else
$first_special_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
?>
<a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>">
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
<?php
echo '<div class="special-cat-on-img">';
echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>
<h6 class="speical-cat-title-img"> <?php the_title() ?> </h6>
<?php echo '</div>'; ?>
<?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?>
<div class="blue-line"></div>
</div>
</a>
Thanks in advance!

Answer 1

Add
background-size: contain;
to the line
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
That is, replace that line with
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;">
in your second image.
See the below screenshot
See the docs for more details about background-css.

Answer 2

Your css for the class of the div where you have your second image, ".special-project-section" has a width of 750 and height of 300. You image is 944x415. Thus is will be cut. To make them look the same change that css class.
If you wish to keep the div the same size try to center the image with css like mentioned here
background: url(url) no-repeat center;