一款B2主题首页的背景自动换图搜索框的设计，然后将提供的HTML、CSS和JavaScript代码放到模块管理中的自定义中，以实现铺满窗口或同宽的效果。

html代码

代码放到模块管理-自定义-铺满窗口或者同宽

CSS代码

.user-banner {
            background: #1d1f20;
            background: url(https://www.dmoe.cc/random.php) no-repeat;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 600px;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            padding-top: 20px
        }
        .user-banner:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: #221f1f;
            background: -moz-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            background: -webkit-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            background: linear-gradient(to right, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#221f1f', endColorstr='#66221f1f', GradientType=1)
        }
        .container {
            padding: 0;
            margin: 0 auto;
            max-width: 1250px;
        }
        .ubanner-ctn {
            margin: 110px auto 30px auto;
            position: relative;
            z-index: 1
        }
        .col80 {
            width: 80%
        }
        .ubanner-ctn h2 {
            text-align: center;
            color: #fff;
            font-size: 46px;
            font-weight: 600;
            margin-bottom: 65px;
            letter-spacing: 1px;
            text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
        }
        .user-banner:after {
            animation: myfirst 250s;
            -webkit-animation: myfirst 250s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite
        }
        .user-banner:after {
            content: "";
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: url(../img/50136295d36c3.png) repeat-y top center;
            background-size: auto;
            height: 8888px;
            opacity: .3
        }
        @keyframes myfirst {
            from {
                left: 0;
                top: 10px
            }
            to {
                top: -8000px
            }
        }
        @-webkit-keyframes myfirst {
            from {
                left: 0;
                top: 10px
            }
            to {
                top: -8000px
            }
        }
        @media (max-width:768px) {
            .xs-1 {
                overflow: unset !important
            }
            .ubanner-ctn h2 {
                margin-bottom: 30px !important
            }
            .container {
                padding: 0;
                margin: 0 auto;
                max-width: 1200px
            }
            .container {
                width: 1200px
            }
            .ubanner-ctn h2 {
                text-align: center;
                color: #fff;
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 30px;
                text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
            }
            .user-banner {
                height: 230px;
                padding-top: 30px;
                position: relative;
                overflow: inherit
            }
            .ubanner-ctn {
                margin: 10px auto 30px auto;
                position: relative;
                z-index: 1;
                width: 90%
            }
            .user-banner:after {
                content: "";
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: url(../img/50136295d36c3.png) repeat-y top center;
                background-size: 99%;
                height: 100%;
                opacity: .3
            }
        }
        #main-wrap-box {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f4e5b3
        }
        #main-wrap {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start
        }
        #content-wrap {
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-end;
            justify-content: space-between
        }
        #searchForm {
            margin: 0;
            padding: 0;
            width: 80%;
            height: 50px;
            min-width: 700px;
            border-bottom: 1px solid #666;
            display: flex;
            justify-content: space-between;
            align-items: center
        }
        #search {
            flex: 1;
            border: 0 none;
            background: 0 0;
            outline: none;
            margin-right: 20px;
            color: #f4e5b3;
            font-size: 16px;
            text-indent: 2em
        }
        :-moz-placeholder {
            color: #f4e5b3;
            opacity: .3
        }
        ::-moz-placeholder {
            color: #f4e5b3;
            opacity: .3
        }
        #search:-ms-input-placeholder {
            color: #f4e5b3;
            opacity: .3
        }
        #search::-webkit-input-placeholder {
            color: #f4e5b3;
            opacity: .3
        }
        #search-type {
            display: flex;
            cursor: pointer;
            align-items: center;
            position: relative;
            height: 100%;
            user-select: none;
            -ms-user-select: none
        }
        #search-type:hover #search-type-name {
            opacity: 1
        }
        #search-type-name {
            margin: 0 5px 0 0;
            opacity: .5;
            transition: all .3s
        }
        #search-type-icon {
            width: 10px;
            height: 10px;
            background: url(../img/1324cb407ca35.png) no-repeat;
            background-size: cover;
            background-position: center;
            transition: all .3s;
            opacity: .5
        }
        #search-type-menu {
            list-style: none;
            position: absolute;
            left: 50%;
            top: 60px;
            transform: translateX(-50%);
            border-radius: 4px;
            border: 1px solid #f4e5b3;
            background-color: rgba(0, 0, 0, .8);
            padding: 0;
            margin: 0;
            overflow: hidden;
            display: none;
            z-index: 4
        }
        #search-type-menu li {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            flex-flow: row nowrap;
            transition: all .5
        }
        #search-type-menu li:hover {
            background-color: rgba(244, 229, 179, .1) !important
        }
        #search-type-menu li:nth-of-type(2n) {
            background-color: rgba(0, 0, 0, .1)
        }
        #search-type-menu img {
            width: 20px;
            height: 20px;
            margin: 5px 10px
        }
        #search-type-menu span {
            white-space: nowrap;
            margin: 0 30px 0 0
        }
        #search-btn {
            padding: 10px 0 10px 10px;
            width: 30px;
            height: 30px;
            margin: 0 0 0 20px;
            background: url(../img/fe99049cf99d5.png) no-repeat;
            background-size: cover;
            background-position: center;
            border: none;
            cursor: pointer;
            user-select: none;
            -ms-user-select: none;
            transition: all .2s;
            outline: none
        }
        .searchTag {
            letter-spacing: .5px;
            text-align: center;
            margin-top: 30px;
            font-size: 14px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 700px
        }
        .searchTag span {
            display: inline-block;
            transform: translateY(-1px)
        }
        .searchTag a {
            margin-right: 15px;
            color: #909399
        }
        .searchTag a:hover {
            color: #fff
        }
        .searchTag i {
            color: #ffbc32;
            margin-right: 2px;
            display: inline-block;
            transform: translateY(1px)
        }
        @media screen and (max-width:768px) {
            #main-wrap {
                width: 100%
            }
            #content-wrap {
                width: 100%
            }
            #searchForm {
                min-width: 350px;
                border-bottom: 0px solid #fff;
            }
            .searchTag {
                min-width: 100px !important
            }
            .container {
                width: 100%;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                *zoom: 1
            }
        }
        /*#banner_wave_1 {*/        /*    width: auto;*/        /*    height: 65px;*/        /*    background: url(../img/bb2dac96f12dc.png) repeat-x;*/        /*    _filter: alpha(opacity=80);*/        /*    position: absolute;*/        /*    bottom: 0;*/        /*    width: 100%;*/        /*    left: -236px;*/        /*    z-index: 1;*/        /*    opacity: 1;*/        /*    transiton-property: opacity, bottom;*/        /*    transition-duration: .4s, .4s;*/        /*    animation-name: move2;*/        /*    animation-duration: 240s;*/        /*    animation-fill-mode: backwards;*/        /*    animation-timing-function: linear;*/        /*    animation-iteration-count: infinite;*/        /*    top: 537px;*/        /*}*/      #banner_wave_1 {
    /*width: auto;*/    height: 65px;
    background: url(../img/bb2dac96f12dc.png) repeat-x;
    /*_filter: alpha(opacity=80);*/    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    /*transiton-property: opacity, bottom;*/    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
#banner_wave_2 {
    /*width: auto;*/    height: 80px;
    background: url(../img/8151cbbe7392d.png) repeat-x;
    /*_filter: alpha(opacity=80);*/    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 1;
    opacity: 1;
    /*transiton-property: opacity, bottom;*/    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 160s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
/* move1锟斤拷move2锟脚拷锟斤拷鍔拷锟界瓭锟斤拷锟介悮锟斤拷鍙凤拷锟斤拷锟界祬鍑︼拷锟斤拷锟斤拷鍠濓拷锟斤拷 *//* 缇冣墻锟斤拷缇岄牭锟斤拷锟斤拷锟斤拷锟介悮锟斤拷闅欙拷锟斤拷锟界緦闋碉拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷銉拷锟斤拷缃╋拷Chrome缇冿紴锟界畽锟斤拷锟斤拷锟斤拷*/ @keyframes move1 {
    100% {
        background-position: 100% 0;
    }
}
@keyframes move2 {
    100% {
        background-position: -100% 0;
    }
}
div #html-box-sydhls {
    z-index: 2;
}
.ubanner-ctn h2 {
            text-align: center;
            color: #fff;
            font-size: 46px;
            font-weight: 600;
            margin-bottom: 65px;
            letter-spacing: 1px;
            text-shadow: 0 3px 6px rgba(0, 0, 0, .2);
            background: url(../img/ff913110e3132.png) repeat #011F42;
            background-size: 300px auto;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-animation: background 12s infinite linear;
            animation: background 12s infinite linear;
        }
        @-webkit-keyframes background {
            from {
                background-position: 0 0%;
            }
            to {
                background-position: 0 -300px;
            }
        }
        @keyframes background {
            from {
                background-position: 0 0%;
            }
            to {
                background-position: 0 -300px;
            }
        }

JS代码