bogleric

The challenge now is that the image replacement is not fitting and adjusting well. What type of image and size should be used to replace the original leaf image?

In order for it to work on all browsers I had to do this:

.page-mycarousel {
background-size: contain;
background-position: center;
background-color: #000000;
background-repeat: no-repeat;
padding: 200px 0 15px;
background-image: url(“https://txxxxxxxxx/wp-content/uploads/bg.jpg”);
}

.page-mycarousel .img-responsive {
display: none;
content: url(“https://txxxxxxxx/wp-content/uploads/bg.jpg”);
}

@media (max-width: 1441px) {
.page-mycarousel {
padding: 200px 0 15px;
}
}

@media (max-width: 1200px) {
.page-mycarousel {
padding: 100px 0 15px;
}
}

@media (max-width: 992px) {
.page-mycarousel {
padding: 100px 0 15px;
}
}

@media (max-width: 768px) {
.page-mycarousel {
padding: 100px 0 15px;
}
}

@media (max-width: 480px) {
.page-mycarousel {
padding: 50px 0 15px;
}
}

@media (max-width: 300px) {
.page-mycarousel {
padding: 50px 0 15px;
}
}

Thanks for the great and quick response! Worked liked a charm.