2020年12月21日星期一

How to remove excess white space in this Image with Text Parallax CSS

I want to know how can I remove the white spacing below, and on the edges? I already tried to remove the margin tag in the CSS code but it still didn't fix the problem. Any suggestion will be greatly appreciated.

<html>  <head>  <script>    (function($) {  /** change value here to adjust parallax level */  var parallax = -0.8;    var $bg_images = $(".wp-block-cover-image");  var offset_tops = [];  $bg_images.each(function(i, el) {  offset_tops.push($(el).offset().top);  });    $(window).scroll(function() {  var dy = $(this).scrollTop();  $bg_images.each(function(i, el) {  var ot = offset_tops[i];  $(el).css("background-position", "50% " + (dy - ot) * parallax + "px");  });  });  })(jQuery);  </script>    <!-- The HTML below is added by Gutenberg Editor in Wordpress 5.0 -->  <!-- widget area for above single content -->  <style>    /**DO NOT COPY THIS SECTION *SEE AND COPY THE END OF CSS PANEL  The css below is added by Gutenberg  Editor in Wordpress 5.0.*/    .wp-block-cover-image {  position: relative;  background-size: cover;  background-position: 50%;  min-height: 630px;  width: 100%;  margin: 0 0 0em;  display: flex;  justify-content: center;  align-items: center;  }    .wp-block-cover-image .wp-block-cover-image-text,  .wp-block-cover-image h2 {  color: #fff;  font-size: 1.5em;  line-height: 1.25;  z-index: 1;  margin-bottom: 0;  max-width: 670px;  padding: 14px;  text-align: center;  }    .wp-block-cover-image.has-background-dim:before {  content: "";  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  background-color: rgba(0, 0, 0, 0.5);  }    /*DO NOT COPY SECTION END*/  /** COPY HERE! Add This to make background image parallax. */    .wp-block-cover-image {  background-attachment: fixed;  background-position: 50% 0;  }  </style>  </head>  <body>  <div class="wp-block-cover-image has-background-dim" style="background-   image:url(https://static.wixstatic.com/media/cada49_c9adefa3849b4205bb675e04076fec28~mv2.jpg)">    <p class="wp-block-cover-image-text"><strong>    ABOUT US<br><br>        WHO WE ARE<br><br>    Cakes by Sophie specializes in bespoke cakes and pastries for all types of events.  The finest   ingredients and utmost care go into each of our products. This is why Cakes by Sophie speak love.    When you want nothing but the best to remember life's greatest events, Cakes by Sophie is here for   you. <br><br>    OUR MISSION<br><br>    To bring you joy with every bite of our products, and to be a part of your best memories.<br>    </strong></p>    </div>  </body>  </html>  

I need to know what is wrong with this code, I cant remove the white spacing below. Thanks in advance!

https://stackoverflow.com/questions/65402399/how-to-remove-excess-white-space-in-this-image-with-text-parallax-css December 22, 2020 at 10:05AM

没有评论:

发表评论