Question

大家好我有背景图片的问题，我想有人可以帮忙。我创建了一个模板，我从现在开始使用模板创建的页面，我给他们类名，这样我就可以改变它们的背景，这样可以正常工作，但问题是当页面重新调整大小时会回来在原始背景下，我将粘贴我的CSS，看看是否有人可以帮助谢谢。

/*!
 * Start Bootstrap - Business Casual Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-image: url(../img/event%20places%20pictures/3arena.jpg);
    color: #000;




}



h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
}

p {
    line-height: 1.6;
    color: #000;
}

hr {
    max-width: 400px;
    border-color: #000000;
}

.brand,
.address-bar {
    display: none;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
}

.navbar-nav {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 3px;
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}

.box {
    margin-bottom: 20px;
    padding: 30px 15px;
    background-color: rgba(255,255,255,0.6);
}

.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}

.navbar-footer {
     background: rgba(255,255,255,0.8);
}

footer p {
    margin: 0;
    padding: 50px 0;

}

@media screen and (min-width:768px) {
    .brand {
    display: inherit;
    margin: 0;
    padding: 30px 0 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 5em;
    font-weight: 700;
    line-height: normal;
    color: #fff;
    background-color:rgba(51,51,51,0.7);
    text-shadow: 2px 2px #000;
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }

    .address-bar {
    display: inherit;
    margin: 0;
    padding: 0 0 40px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 400;
    letter-spacing: 3px;
    color: #fff;
    background-color: rgba(51,51,51,0.7);
    text-shadow: 2px 2px #000;
    }
    .social{
        background-color: rgba(51,51,51,0.7);
        display: inherit;
         margin: 0;
         padding-bottom:20px



    }

    .social li{
    display:inline;

}  


.fb-share-button{
    position:relative
    top:-7px;

}
.fb-like > span {
  vertical-align: baseline !important;
}   








    .navbar {
        border-radius: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar {
        min-height: 0;
    }

    .navbar-default {
        border: none;
        background:rgba(255,255,255,0.8);

    }

    .nav>li>a {
    padding: 25px;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.15em;
    }


}

@media screen and (min-width:1200px) {
    .box:after {
        content: '';
        display: table;
        clear: both;
    }

/* start of css for each of the venue pages*/

body.gallery{
    background-image:url(../img/event%20places%20pictures/3arena.jpg)
    }



body.academy{
    background-image:url(../img/event%20places%20pictures/the%20academy.jpg)

    }



body.vicar{
    background-image:url(../img/event%20places%20pictures/vicar%20st.jpg)   
}



body.Ambassador{
    background-image:url(../img/event%20places%20pictures/Ambassador.jpg)



}


body.aviva{
    background-image:url(../img/event%20places%20pictures/aviva.jpg)
}

body.arena{
    background-image:url(../img/event%20places%20pictures/02-Arena.jpg))
}
body.croke{
    background-image:url(../img/event%20places%20pictures/croke%20park.jpg)
}
body.gaiety{

    background-image:url(../img/event%20places%20pictures/gaiety-theater.jpg)


}


body.gate{
    background-image:url(../img/event%20places%20pictures/gate%20theatre.jpg)
}
body.grand{
    background-image:url(../img/event%20places%20pictures/grand%20social.jpg)
}
body.laughter{
    background-image:url(../img/event%20places%20pictures/laughter%20lounge.jpg)
}
body.marlay{
    background-image:url(../img/event%20places%20pictures/marlay%20park.jpg)
}
body.olympia{
    background-image:url(../img/event%20places%20pictures/the-olympia-photo.jpg)
}
body.rds{
    background-image:url(../img/event%20places%20pictures/rds.jpg)
}
body.button{
    background-image:url(../img/event%20places%20pictures/The_Button_Factory.jpg)
}
body.whelans{background-image:url(../img/event%20places%20pictures/whelans.jpg)
}
body.signup{background-image:url(../img/bianca%20photos/IMG-20150717-WA0024.jpg)
}
body.events{

    background-image:url(../img/bianca%20photos/10402046_118490843153454`enter code here`3_1165711705389334252_n.jpg)
}
.events-box{
    background-color: rgba(255,255,255,0.9);
}

Answer 1

您已将这些背景图片放置在定位min-width:1200px的媒体查询中，因此在1200px以下的任何宽度都不会适用，您只会看到默认的正文背景图片。

所以只需从媒体查询中删除这些背景规则。

Answer 2

您忘记关闭媒体查询括号}。

body.class背景图片大小

2 个答案: