https://www.lareb.nl/js/background-img.js

1$(document).ready(function () {
2    // MID BANNER
3    const midBannerInfo = $("#mid-banner-info")[0];
4    const midBannerWidth = $("#mid-banner-width")[0];
5    if (midBannerWidth !== undefined) {
6        var w = midBannerWidth.innerText > 0 ? midBannerWidth.innerText : 550;
7        midBannerInfo.style.width = `${w}px`;
8    }
9    const midBannerHeight = $("#mid-banner-height")[0];
10    if (midBannerHeight !== undefined) {
11        var h = midBannerHeight.innerText > 0 ? midBannerHeight.innerText : 280;
12        midBannerInfo.style.height = `${h}px`;
13    }
14    const midBannerImgUrl = $("#mid-banner-img-url");
15    const midBannerImg = $("#mid-banner-img")[0];
16    if (midBannerImgUrl !== undefined && midBannerImg !== undefined) {
17        midBannerImg.style.backgroundColor = "transparent";
18        if (screen.width > 480) {
19            midBannerImg.style.backgroundImage = `url(${midBannerImgUrl[0].innerText})`;
20        }
21        midBannerImg.style.backgroundSize = "cover";
22        midBannerImg.style.backgroundRepeat = "no-repeat";
23        midBannerImg.style.backgroundPosition = "0% 47%";
24        midBannerImg.style.backgroundOrigin = "padding-box";
25
26    }
27
28    // PHOTO BANNER
29    const photoBannerImg = $("#photo-banner-img");
30    if (photoBannerImg !== undefined) {
31        let bannerImg = $("#show-top-photo-banner")[0];
32        const showPromoPhotoBanner = $("#show-promo-photo-banner")[0];
33        if (showPromoPhotoBanner !== undefined) {
34            bannerImg = showPromoPhotoBanner;
35        }
36        if (bannerImg !== null && bannerImg !== undefined) {
37            bannerImg.style.backgroundColor = "transparent";
38            bannerImg.style.backgroundImage = `url(${photoBannerImg[0].innerText})`;
39            bannerImg.style.backgroundSize = "cover";
40            bannerImg.style.backgroundRepeat = "no-repeat";
41            //bannerImg.style.backgroundPosition = "0% 13%";
42            bannerImg.style.backgroundOrigin = "padding-box";
43
44            var promo = $("#promo-photo-banner")[0];
45            if (promo !== null && promo !== undefined) {
46                promo.style.backgroundColor = "transparent";
47                promo.style.backgroundImage = `url(${photoBannerImg[0].innerText})`;
48                promo.style.backgroundSize = "cover";
49                promo.style.backgroundRepeat = "no-repeat";
50                promo.style.backgroundPosition = "0% 13%";
51                promo.style.backgroundOrigin = "padding-box";
52            }
53        }
54    }
55
56    //LAREB Section
57    const larebSectionItemImg1 = $("#lareb-section-item-img-1")[0];
58    if (larebSectionItemImg1 !== undefined && larebSectionItemImg1 !== null) {
59        const lsi = larebSectionItemImg1.innerText;
60        let larebSectionItem = $("#larebSectionItem-1")[0];
61        setBannerImg(larebSectionItem, lsi);
62    }
63    const larebSectionItemImg2 = $("#lareb-section-item-img-2")[0];
64    if (larebSectionItemImg2 !== undefined && larebSectionItemImg2 !== null) {
65        const lsi = larebSectionItemImg2.innerText;
66        let larebSectionItem = $("#larebSectionItem-2")[0];
67        setBannerImg(larebSectionItem, lsi);
68    }
69    const larebSectionItemImg3 = $("#lareb-section-item-img-3")[0];
70    if (larebSectionItemImg3 !== undefined && larebSectionItemImg3 !== null) {
71        const lsi = larebSectionItemImg3.innerText;
72        let larebSectionItem = $("#larebSectionItem-3")[0];
73        setBannerImg(larebSectionItem, lsi);
74    }
75
76    function setBannerImg(bImg, lsi) {
77        if (bImg !== null && bImg !== undefined) {
78            bImg.style.backgroundColor = "transparent";
79            bImg.style.backgroundImage = `url(${lsi})`;
80            bImg.style.backgroundSize = "cover";
81            bImg.style.backgroundRepeat = "no-repeat";
82            bImg.style.backgroundPosition = "0% 0%";
83            bImg.style.backgroundOrigin = "padding-box";
84        }
85    }
86});