MyCity » Web dizajn / HTML » background se ne fituje skroz i problem dugmad responsive bootstrap

background se ne fituje skroz i problem dugmad responsive bootstrap

Napisano na dan: 11.2.2015
1

background se ne fituje skroz i problem dugmad responsive bootstrap
Sledeća strana Pagination

Idi na vrh

Poslao: 11 Feb 2015 10:25
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

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..



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 11 Feb 2015 22:11
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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 ?



Poslao: 12 Feb 2015 09:59
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

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>


Poslao: 12 Feb 2015 10:41
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

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.

Poslao: 12 Feb 2015 10:49
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

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

Poslao: 12 Feb 2015 14:49
Idi na vrh
offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

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% */   } }

Ziveli

Poslao: 13 Feb 2015 20:12
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

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..

Poslao: 14 Feb 2015 03:18
Idi na vrh
offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

pa podesi @media screen za ostale device

Poslao: 14 Feb 2015 15:13
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

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

Poslao: 14 Feb 2015 19:32
Idi na vrh
offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

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

MyCity » Web dizajn / HTML » background se ne fituje skroz i problem dugmad responsive bootstrap

Ko je trenutno na forumu
 

Ukupno su 1174 korisnika na forumu :: 109 registrovanih, 4 sakrivenih i 1061 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 13297 - dana 20 Jan 2026 17:42

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: -Max-, aleksamaki, babaroga, Bane san, Bane5, bavar357, Bbbggg1979, Boris BM, Boris90, Borski1977, boskelazo, boxbole, BOXRR, bufanje, ccoogg123, Cicumile, crnitrn, CVOJ 410.lad PVO, dejno, Deki Duga Devetka, Denaya, Djokislav, Djota1, Dolinc, DonerEbal, doom83, Dorcolac, draganca, draganl, DrNeoCortex, Duh sa sekirom, Dungorth, dusanobr, Dzuki, efektiva, ElvisP, EXIT78, FileFinder, Frunze, g_g, GazdaDjoka, GH69, gregorxix, Hitri, ibssa, icemilos, Imperator_Aleksandr_lll, Istman, Jester, jon istvan, Kajzer Soze, Kapetan993, Kiki98TZ, Klass, Knovakov, Komanca, Kozi-RS, Kriglord, Kubovac, kuntakinte, laurusri, Lester Freamon, lucko1, lukisa, Marko Marković, milenko crazy north, Miler88, Milometer, Milos1389, milutin134, Mirage 2000N, Mitogna, mrav pesadinac, nebidrag, Neutral-M, nikoladim, novator, opt1, Paklenica, Pekman, Permaldar, Petar888, Pilence, pixi, PlayerOne, Povratak1912, Prečanin30, R_038, Resad76, samp1389, sarma, Sonic, theNedjeljko, trajkoni018, Trpe Grozni, trutcina, Tvrtko I, vathra, vidra boy, Vlad000, Vrač, vuksa72, xAlex2, yagosh, Zastava, zeka013, zmajbre, Zvlade, Zvrk