2016-01-21 4 views
0

привет всем, у меня проблемы с фоновыми изображениями, и мне интересно, может кто-то помочь. Я создал шаблон, с которого я работаю теперь страницы, которые я создаю из шаблона Я даю им имена классов, поэтому я могу изменить фон из них, который работает нормально, но проблема в том, когда страница изменяет размеры вернемся к исходному фону, и я вставлю свой css, если кто-нибудь сможет помочь.body.class background image size

/*! 
* 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); 
} 
+0

четко сформулируйте свою проблему. создайте [скрипку] (https://jsfiddle.net) вашего кода и точно расскажите, в чем проблема. – Venugopal

ответ

1

Вы разместили эти фоновые изображения в средствах массовой информации запроса таргетинг min-width:1200px, поэтому при любой ширине под 1200px, что не будет применяться, и вы увидите только по умолчанию фонового изображения тела с.

Так что просто удалите эти правила фона из медиа-запроса.

+0

жаль, что не уверен, что вы имеете в виду, что это новый вид для всего этого – scottishriver

+0

его хорошо, я получил его, спасибо за вашу помощь – scottishriver

0

Вы забыли закрыть скобку медиа-запросов}.