首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >body.class背景图像大小

body.class背景图像大小
EN

Stack Overflow用户
提问于 2016-01-21 21:05:01
回答 2查看 36关注 0票数 0

大家好,我的背景图像有问题,我想知道有人可以帮助我。我创建了一个模板,我现在正在工作的页面,我从模板创建的页面,我给他们类名,这样我就可以改变他们的背景,这是工作得很好,但问题是,当页面重新调整大小,它回到原来的背景,我会粘贴我的css看看是否有人可以帮助谢谢。

代码语言:javascript
复制
/*!
 * 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);
}
EN

回答 2

Stack Overflow用户

发布于 2016-01-21 21:21:38

您已经将这些背景图像放入了针对min-width:1200px的媒体查询中,所以在1200px以下的任何宽度都不适用,您将只能看到默认的身体背景图像。

因此,只需从媒体查询中删除这些背景规则。

票数 1
EN

Stack Overflow用户

发布于 2016-01-21 21:37:36

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34924657

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档