Strange gray stripe on testimonials section

Hi,

My website is: www.advsupport.pl
I have a problem with strange gray stripe which sometimes appears on testimonials section, while scrolling/using the page. Usually it looks fine, and the picture fits the whole testimonials section, but sometimes the picture “goes up” and it leaves stripe on the bottom, as you can see on the picture below:

I would really appreciate your help!

Custom CSS (i know its messy):
#mainnav{
margin-top: 24px;
}

#menu-item-695 {
margin-top: 2px;
}

.site-logo
{
margin-top: 2px;
margin-bottom: 2px;
}

.contact-address
{
max-width: 300px;
margin: left
}

#text-2{
margin-bottom: -30px;
}

#sydney_contact_info-2{
margin-left: 50px;
}

#text-3{
margin-left: 50px;
height:470px;
}

.site-info.container
{
display: none;
}

.roll-testimonials .whisper {
font-size: 16px;
}

@media only screen and (max-width:991px){
.roll-testimonials .whisper {
font-size: 12px;
padding: -20px;
display: block;
}
}
#mainnav-mobi a {
text-align: center;
}

.single-projects #primary.col-md-9 {
width: 100%;
}

.single-projects #secondary,
.single-projects .meta-post,
.single-projects .comments-area {
display: none;
}

.entry-thumb {
display: none;
}

.entry-content .entry-thumb {
display: block;
}

.single-projects .entry-header {
text-align: center;
}

.wpcf7-form label {
display: block;
}

.wpcf7-form label input {
width: 100% !important;
}

.preloader .pre-bounce1, .preloader .pre-bounce2 {
display: none;
}
.preloader .spinner {
display: none;
}

.wpcf7-form label {
display: block;
}

.wpcf7-form label input {
width: 100% !important;
}

@media only screen and (max-width:991px) {
#text-2 {
margin-left: 0 !important;
}
}

#text-2 {
margin-left: -250px
}

input[type=“submit”]
{
float: right;
}

.div.wpcf7-response-output, div.wpcf7-validation-errors { display: none !important; }
span.wpcf7-not-valid-tip { display: none; }

.col-md-12 {
margin-top: 30px;
margin-bottom: -70px
}

.site-header {
background-color: white !important;
}

.site-header.float-header {

background-color: #fff !important;
}

@media only screen and (max-width:991px){
.site-header.float-header{
padding: 20px 0 !important;
}
}

.text-slider .maintitle:after,
.panel-grid-cellafter{
display: none;
}

.single-services #primary.col-md-9 {
width: 100%;
}

.single-services #secondary,
.single-services .meta-post,
.single-services .comments-area {
display: none;
}

.single-services .entry-header {
text-align: center;
}

.content > p {
display: none;
}

@media only screen and (max-width: 479px) {

.roll-project.fullwidth .project-item {
width: 50%;
}
}

@media only screen and (max-width: 479px) {
.roll-testimonials .whisper {
font-size: 14px;
}
}

.btn-menu {
color: #2d2e34;
}

.quotes-box{
background-image: url(“http://deborahgoodchild.com/wp-content/uploads/2016/03/Testimonial-Background.jpg”) !important;
background-attachment: fixed !important;
}

.text-slider .maintitle, .text-slider .subtitle {
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

.panel-row-style.quotes-box{
background-attachment: scroll !important;
background-position: top center !important;
}

.slides-pagination{
position: relative;
margin-top: -150px;
z-index: 9999;
text-align: center;
}

.slides-pagination a{
display: inline-block;
width: 12px;
height: 12px;
margin: 3px;
background: #d3d3d3;
border-radius: 100%;
}

.slides-pagination a.current{
background-color: #c33c48;
color: #000;
}

#panel-220-0-0-0 .textwidget p {
text-align: justify;
-moz-text-align-last: center;
text-align-last: center;
}

#pg-220-1 {
border-bottom: 1.5px solid rgb(224, 224, 224);
}

#pgc-220-0-0 {
border-bottom: 1.5px solid rgb(224, 224, 224);
}

#panel-220-0-0-0 .textwidget p {
margin-bottom: 90px;
}

#pgc-220-1-0 {
margin-bottom: -30px;
}

.nav-next {
display: none;
}
.nav-previous {
display: none;
}

#pgc-220-6-0 .widget-title
{
display:none;
}

.slides-pagination a {
text-indent: -9999px;
}

Hi,

Please try this Custom CSS to fix the background image to the center instead of smoothly moving which makes your image to float above the content area:

.panel-row-style-for-220-3 {
    background-position: center !important;
}

If you don’t like this effect, then please try a different image size for your background area, like 1600x600px, your image now is square, so it may not work well for that area.

Please let me know how it works.

Kind Regards,
Csaba

Thank you! It helped!

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba