bogleric

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(“http://txxxxxxxxx/wp-content/uploads/bg.jpg”);
}

.page-mycarousel .img-responsive {
display: none;
content: url(“http://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;
}
}