background se ne fituje skroz i problem dugmad responsive bootstrap

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Kao sto mozete videti na slici ne daje mi celu pozadinu na mom 15.6'' ekranu...


Sto se tice responsive, koristio sam bootstrap, i nesto tu ne funkcionise, a sad rucno i nema logike da menjam kod svakog screen size-a.


Evo ga css
/* ==== Google font ==== */ @import url('http://fonts.googleapis.com/css?family=Lato:400,300,700,900'); html,body {     height: 100%;    margin:0;    padding:0;    } body {    background: #394864;         font-family: 'Lato', sans-serif;     font-weight: 300;     font-size: 16px;     color: #555;     line-height: 1.6em;     -webkit-font-smoothing: antialiased;     -webkit-overflow-scrolling: touch; } h1, h2, h3, h4, h5, h6 {     font-family: 'Lato', sans-serif;     font-weight: 300;     color: #444; } h1 {    font-size: 40px; } h3 {    font-weight: 400; } h4 {    font-weight: 400;    font-size: 20px; } p {     margin-bottom: 20px;     font-size: 16px; } a {     color: #ACBAC1;     word-wrap: break-word;     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;     -o-transition: color 0.1s ease-in, background 0.1s ease-in;     transition: color 0.1s ease-in, background 0.1s ease-in; } a:hover, a:focus {     color: #4F92AF;     text-decoration: none;     outline: 0; } a:before, a:after {     -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;     -moz-transition: color 0.1s ease-in, background 0.1s ease-in;     -ms-transition: color 0.1s ease-in, background 0.1s ease-in;     -o-transition: color 0.1s ease-in, background 0.1s ease-in;     transition: color 0.1s ease-in, background 0.1s ease-in; } .alignleft {     text-align: left; } .alignright {     text-align: right; } .aligncenter {     text-align: center; } .btn {   display: inline-block;   padding: 10px 20px;   margin-bottom: 0;   font-size: 14px;   font-weight: normal;   line-height: 1.428571429;   text-align: center;   white-space: nowrap;   vertical-align: middle;   cursor: pointer;   -webkit-user-select: none;      -moz-user-select: none;       -ms-user-select: none;        -o-user-select: none;           user-select: none;   background-image: none;   border: 1px solid transparent;   border-radius: 0; } .btn-theme  {   color: #fff;   background-color: #4F92AF;   border-color: #4F92AF; } .btn-theme:hover  {   color: #fff;   background-color: #444;   border-color: #444; } form.signup input  {    height: 42px;    width: 200px;    border-radius: 0;    border: none; } form.signup button.btn {    font-weight: 700; } form.signup input.form-control:focus {    border-color: #fd680e; } /* wrapper */ #wrapper {    text-align: center;    padding: 50px 0;    background: url(../img/slika.jpg) no-repeat center top;    background-attachment: relative;    background-position: center center;    min-height: 650px;    width: 100%;        -webkit-background-size: 100%;     -moz-background-size: 100%;     -o-background-size: 100%;     background-size: 100%; height: 100%;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover; background-attachment: fixed; } /*animation social icons hower*/ .grow  {   -webkit-transition: all 0.5s ease;      -moz-transition: all 0.5s ease;        -o-transition: all 0.5s ease;       -ms-transition: all 0.5s ease;           transition: all 0.5s ease; }   .grow:hover {   border-radius: 50%;   -webkit-transform: rotate(360deg);      -moz-transform: rotate(360deg);        -o-transform: rotate(360deg);       -ms-transform: rotate(360deg);           transform: rotate(360deg); } /*end of animation social icons hower*/ @font-face {    font-family: 'Amatic-Bold';    src: url(../fonts/Amatic-Bold.ttf) format('truetype');} @font-face {    font-family: myFirstFont;    src: url(../fonts/JosefinSlab-Regular.ttf); } @font-face {    font-family: mySecondFont;    src: url(../fonts/Code.otf); } .form-control {    font-family:myFirstFont; } .withFont {    font-family: myFirstFont;    color: #fff;    font-size: 75px; position:relative; top:50px; } #wrapper h1 {    margin-top: 60px;    margin-bottom: 40px;    color: #fff;    font-size: 45px;    font-weight: 900;    letter-spacing: -1px; } h2.subtitle {    color: #fff;    font-size: 30px;    font-family:mySecondFont; } /* countdown */ #countdown {    font-size: 48px;    color: #fff;    line-height: 1.1em;    margin: 40px 0 60px; } /* footer */ p.copyright {    margin-top: 50px;    color: #fff;    text-align: center; }   

Ovo je html za formu
   <form action="sendToFile.php" method="POST"                   class="form-inline signup" role="form">                   <div class="form-group">                      <input type="email" class="form-control" id="exampleInputEmail1"                         placeholder="Enter your email address">                   </div>                                      <button type="submit" class="btn btn-theme">Find out more!</button>                </form>

Koristio sam te dve klase za button, ali on nikako ne stoji kako treba..

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Citat:Kao sto mozete videti na slici ne daje mi celu pozadinu na mom 15.6'' ekranu...

Mozes li da uokviris taj deo koji nije popunjen slikom, posto ne vidim u cemu je problem. Jel ovaj skorz levi crni deo ?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ne,ne, taj crni deo je deo slike. Ono ispod skroz, plavo, uokvirio sam ja to na slici, pozadina mi ne ide skroz do dole..A i ovaj responsive ne znam sto ne funkcionise skroz kako treba..


Evo body tag
<body>    <div id="wrapper">       <div class="container">          <div class="row">          <div class="col-sm-12 col-md-12 col-lg-12">                             <h1 class="withFont">Coming soon!</h1>                </div>                </div>                                             <div class="row">                <div class="logo">                   <h1>Logo</h1>                </div>                </div>                 <div class="row">                <h2 class="subtitle">We're currently under construction!</h2>                </div>                <div id="countdown"></div> <div class="row">                <form action="sendToFile.php" method="POST"                   class="form-inline signup" role="form">                   <div class="form-group">                      <input type="email" class="form-control" id="exampleInputEmail1"                         placeholder="Enter your email address">                   </div>                                      <button type="submit" class="btn btn-theme">Find out more!</button>                </form>             </div>                                 <div class="row">             <div class="col-lg-6 col-lg-offset-3">                <p class="copyright">                   Copyright © 2015 - <a href="#">Yoursite.com</a>                </p>             </div>                       </div>       </div>       <div  id="social-icons">                   <a href="#"><img class="grow" src="cs/img/twitter.png" width="30" height="30"                      alt="Twitter" /></a> <a href="#"><img class="grow" src="cs/img/facebook.png"                      width="30" height="30" alt="Facebook" /></a>                      <a href="#"><img class="grow" src="cs/img/googlePlus.png"                      width="30" height="30" alt="gplus" /></a>                      <a href="#"><img class="grow" src="cs/img/pinterest.png" width="30" height="30"                      alt="pinterest" /></a>                      <a href="#"><img class="grow" src="cs/img/rss.png" width="30" height="30"                      alt="rss" /></a>                                      </div>    </div>    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>    <script src="cs/js/jquery.countdown.min.js"></script>    <script type="text/javascript">   $('#countdown').countdown('2016/01/01', function(event) {     $(this).html(event.strftime('%w:%d:%H:%M:%S'));   }); </script> </body>

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Stavio si background image u wrapper ID a istovremeno mu zadao top i bottom pading 50px. Ako hoces da fituje, ne sme da ima paddinge.

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Sklonio sam paddinge, ali opet ima plave pozadinee...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Nisam gledao kod preveliki je ali cu ti dati savet za tako velike slike koje zelis kao pozadine.

Stavljaj ih u html:

html {   background: url(images/bg.jpg) no-repeat center center fixed;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; }

Za IE:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

Za Responsive:

img.bg {   /* Set rules to fill background */   min-height: 100%;   min-width: 1024px;   /* Set up proportionate scaling */   width: 100%;   height: auto;   /* Set up positioning */   position: fixed;   top: 0;   left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */   img.bg {     left: 50%;     margin-left: -512px;   /* 50% */   } }

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Evo ovako sam odradio u wrapperu, i radi mi sada to, fitujekako treba
#wrapper {    text-align: center;    background-image: url('../img/slika.jpg');    background-position: center center;    background-size: cover;    width: auto;    height: auto;    min-height: 100%;    min-width: 100%;    position: absolute;    width: auto;    text-align: center;    z-index: 1;    overflow: hidden; } ..

Samo jos ne radi skroz za svaki telefon responsive...malo sam ga izmenio, i prilagodio, ali jos ne funkcionise za neke telefone..

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

pa podesi @media screen za ostale device

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

pa fora je sto sam hteo preko bootstrapa to da resim...ali ne kontam zasto ne funkcionise..

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Pa jesi override bootstrap ? Overriduj ga i postavi svoj meta print