Hi @bogleric
For the change green header, Kindly paste the code given below in Custom CSS field (Appearance -> Customize -> Header settings -> Custom CSS).
.page-mycarousel .img-responsive {
content: url(“https://pixabay.com/get/eb37b60a2ff0043ed1534705fb094093e071e2d004b015489cf4c179a2ebb6/call-center-2275745_1920.jpg”);
}
Change above image Url as per the requirement.
For more help refer this screenshot: http://prntscr.com/fsn7ei
Thanks
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;
}
}
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?
Hi @bogleric,
Can you please send me your website URL, in this way we will assist you better.
Thanks
Any resolution on this item? I was able to use Imran’s first suggestion to get my header updated in Google Chrome, but it’s not working in Microsoft Edge or Internet Explorer.
Looking at those pages, I see the following code that may be an issue, but I’m not sure how to fix it:
.page-mycarousel {
background: url(“../images/page-header-bg.jpg”) repeat scroll 0 0 / cover #143745;
box-shadow: 0 7px 10px -10px #000;
}
———–
“../images/page-header-bg.jpg” is NOT the correct URL to my photo.
