1

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"><a href="<?php the_permalink()?>"> <?php the_title() ?> </a></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!

Lal
  • 14,726
  • 4
  • 45
  • 70
Avishay28
  • 2,288
  • 4
  • 25
  • 47

2 Answers2

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

enter image description here

See the docs for more details about background-css.

Lal
  • 14,726
  • 4
  • 45
  • 70
0

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;
Community
  • 1
  • 1
Craveiro
  • 503
  • 5
  • 15