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

  2. /* ==== Google font ==== */
  3. @import url('http://fonts.googleapis.com/css?family=Lato:400,300,700,900');
  4. html,body {
  5.   height: 100%;
  6.  margin:0;
  7.  padding:0;
  8.  }
  9. body {
  10.  background: #394864;
  11.  
  12.   font-family: 'Lato', sans-serif;
  13.   font-weight: 300;
  14.   font-size: 16px;
  15.   color: #555;
  16.   line-height: 1.6em;
  17.   -webkit-font-smoothing: antialiased;
  18.   -webkit-overflow-scrolling: touch;
  19. }
  21. h1, h2, h3, h4, h5, h6 {
  22.   font-family: 'Lato', sans-serif;
  23.   font-weight: 300;
  24.   color: #444;
  25. }
  27. h1 {
  28.  font-size: 40px;
  29. }
  31. h3 {
  32.  font-weight: 400;
  33. }
  35. h4 {
  36.  font-weight: 400;
  37.  font-size: 20px;
  38. }
  40. p {
  41.   margin-bottom: 20px;
  42.   font-size: 16px;
  43. }
  46. a {
  47.   color: #ACBAC1;
  48.   word-wrap: break-word;
  49.   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  50.   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  51.   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  52.   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  53.   transition: color 0.1s ease-in, background 0.1s ease-in;
  54. }
  56. a:hover,
  57. a:focus {
  58.   color: #4F92AF;
  59.   text-decoration: none;
  60.   outline: 0;
  61. }
  63. a:before,
  64. a:after {
  65.   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  66.   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  67.   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  68.   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  69.   transition: color 0.1s ease-in, background 0.1s ease-in;
  70. }
  72. .alignleft {
  73.   text-align: left;
  74. }
  75. .alignright {
  76.   text-align: right;
  77. }
  79. .aligncenter {
  80.   text-align: center;
  81. }
  83. .btn {
  84. display: inline-block;
  85. padding: 10px 20px;
  86. margin-bottom: 0;
  87. font-size: 14px;
  88. font-weight: normal;
  89. line-height: 1.428571429;
  90. text-align: center;
  91. white-space: nowrap;
  92. vertical-align: middle;
  93. cursor: pointer;
  94. -webkit-user-select: none;
  95.    -moz-user-select: none;
  96.     -ms-user-select: none;
  97.      -o-user-select: none;
  98.         user-select: none;
  99. background-image: none;
  100. border: 1px solid transparent;
  101. border-radius: 0;
  102. }
  104. .btn-theme  {
  105. color: #fff;
  106. background-color: #4F92AF;
  107. border-color: #4F92AF;
  108. }
  109. .btn-theme:hover  {
  110. color: #fff;
  111. background-color: #444;
  112. border-color: #444;
  113. }
  114. form.signup input  {
  115.  height: 42px;
  116.  width: 200px;
  117.  border-radius: 0;
  118.  border: none;
  119. }
  120. form.signup button.btn {
  121.  font-weight: 700;
  122. }
  123. form.signup input.form-control:focus {
  124.  border-color: #fd680e;
  125. }
  129. /* wrapper */
  131. #wrapper {
  132.  text-align: center;
  133.  padding: 50px 0;
  134.  background: url(../img/slika.jpg) no-repeat center top;
  135.  background-attachment: relative;
  137.  background-position: center center;
  138.  min-height: 650px;
  139.  width: 100%;   
  140.   -webkit-background-size: 100%;
  141.   -moz-background-size: 100%;
  142.   -o-background-size: 100%;
  143.   background-size: 100%;
  144. height: 100%;
  145.   -webkit-background-size: cover;
  146.   -moz-background-size: cover;
  147.   -o-background-size: cover;
  148.   background-size: cover;
  149. background-attachment: fixed;
  150. }
  152. /*animation social icons hower*/
  154. .grow  {
  155. -webkit-transition: all 0.5s ease;
  156.    -moz-transition: all 0.5s ease;
  157.      -o-transition: all 0.5s ease;
  158.     -ms-transition: all 0.5s ease;
  159.         transition: all 0.5s ease;
  160. }
  162. .grow:hover {
  163. border-radius: 50%;
  164. -webkit-transform: rotate(360deg);
  165.    -moz-transform: rotate(360deg);
  166.      -o-transform: rotate(360deg);
  167.     -ms-transform: rotate(360deg);
  168.         transform: rotate(360deg);
  169. }
  170. /*end of animation social icons hower*/
  172. @font-face {
  173.  font-family: 'Amatic-Bold';
  174.  src: url(../fonts/Amatic-Bold.ttf) format('truetype');}
  176. @font-face {
  177.  font-family: myFirstFont;
  178.  src: url(../fonts/JosefinSlab-Regular.ttf);
  179. }
  180. @font-face {
  181.  font-family: mySecondFont;
  182.  src: url(../fonts/Code.otf);
  183. }
  185. .form-control
  186. {
  187.  font-family:myFirstFont;
  188. }
  191. .withFont {
  192.  font-family: myFirstFont;
  193.  color: #fff;
  194.  font-size: 75px;
  195. position:relative;
  196. top:50px;
  198. }
  201. #wrapper h1 {
  202.  margin-top: 60px;
  203.  margin-bottom: 40px;
  204.  color: #fff;
  205.  font-size: 45px;
  206.  font-weight: 900;
  207.  letter-spacing: -1px;
  208. }
  210. h2.subtitle {
  211.  color: #fff;
  212.  font-size: 30px;
  213.  font-family:mySecondFont;
  214. }
  216. /* countdown */
  217. #countdown {
  218.  font-size: 48px;
  219.  color: #fff;
  220.  line-height: 1.1em;
  221.  margin: 40px 0 60px;
  222. }
  225. /* footer */
  226. p.copyright {
  227.  margin-top: 50px;
  228.  color: #fff;
  229.  text-align: center;
  230. }   


Ovo je html za formu
  1. <form action="sendToFile.php" method="POST"
  2.                class="form-inline signup" role="form">
  3.                <div class="form-group">
  4.                   <input type="email" class="form-control" id="exampleInputEmail1"
  5.                      placeholder="Enter your email address">
  6.  
  7.                </div>
  8.                
  9.                <button type="submit" class="btn btn-theme">Find out more!</button>
  10.             </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

  1. <body>
  2.  
  3.    <div id="wrapper">
  4.       <div class="container">
  5.          <div class="row">
  6.          <div class="col-sm-12 col-md-12 col-lg-12">
  7.             
  8.                <h1 class="withFont">Coming soon!</h1>
  9.                </div>
  10.                </div>
  11.                
  12.             
  13.                <div class="row">
  14.                <div class="logo">
  15.                   <h1>Logo</h1>
  16.                </div>
  17.                </div>
  18.                
  19.  
  20.  
  21. <div class="row">
  22.                <h2 class="subtitle">We're currently under construction!</h2>
  23.                </div>
  24.                <div id="countdown"></div>
  25. <div class="row">
  26.  
  27.                <form action="sendToFile.php" method="POST"
  28.                   class="form-inline signup" role="form">
  29.                   <div class="form-group">
  30.                      <input type="email" class="form-control" id="exampleInputEmail1"
  31.                         placeholder="Enter your email address">
  32.  
  33.                   </div>
  34.                   
  35.                   <button type="submit" class="btn btn-theme">Find out more!</button>
  36.                </form>
  37.             </div>
  38.  
  39.             
  40.  
  41.          
  42.          <div class="row">
  43.             <div class="col-lg-6 col-lg-offset-3">
  44.                <p class="copyright">
  45.                   Copyright © 2015 - <a href="#">Yoursite.com</a>
  46.                </p>
  47.             </div>
  48.             
  49.          </div>
  50.       </div>
  51.       <div  id="social-icons">
  52.                   <a href="#"><img class="grow" src="cs/img/twitter.png" width="30" height="30"
  53.                      alt="Twitter" /></a> <a href="#"><img class="grow" src="cs/img/facebook.png"
  54.                      width="30" height="30" alt="Facebook" /></a>
  55.                      <a href="#"><img class="grow" src="cs/img/googlePlus.png"
  56.                      width="30" height="30" alt="gplus" /></a>
  57.                      <a href="#"><img class="grow" src="cs/img/pinterest.png" width="30" height="30"
  58.                      alt="pinterest" /></a>
  59.                      <a href="#"><img class="grow" src="cs/img/rss.png" width="30" height="30"
  60.                      alt="rss" /></a>
  61.                      
  62.                </div>
  63.    </div>
  64.    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  65.  
  66.    <script src="cs/js/jquery.countdown.min.js"></script>
  67.    <script type="text/javascript">
  68.   $('#countdown').countdown('2016/01/01', function(event) {
  69.     $(this).html(event.strftime('%w:%d:%H:%M:%S'));
  70.   });
  71. </script>
  72.  
  73. </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:

  1. html {
  2.   background: url(images/bg.jpg) no-repeat center center fixed;
  3.   -webkit-background-size: cover;
  4.   -moz-background-size: cover;
  5.   -o-background-size: cover;
  6.   background-size: cover;
  7. }


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

Za Responsive:

  1. img.bg {
  2.   /* Set rules to fill background */
  3.   min-height: 100%;
  4.   min-width: 1024px;
  5.  
  6.   /* Set up proportionate scaling */
  7.   width: 100%;
  8.   height: auto;
  9.  
  10.   /* Set up positioning */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14. }
  15.  
  16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
  17.   img.bg {
  18.     left: 50%;
  19.     margin-left: -512px;   /* 50% */
  20.   }
  21. }

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

  1. #wrapper {
  2.    text-align: center;
  3.    background-image: url('../img/slika.jpg');
  4.    background-position: center center;
  5.    background-size: cover;
  6.    width: auto;
  7.    height: auto;
  8.    min-height: 100%;
  9.    min-width: 100%;
  10.    position: absolute;
  11.    width: auto;
  12.    text-align: center;
  13.    z-index: 1;
  14.    overflow: hidden;
  15. }
..

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 852 korisnika na forumu :: 30 registrovanih, 1 sakriven i 821 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., Betty25, bozo13, bpop, brufen, BUDDAR70, Cicumile, darkojovxp, Dejan_vw, Folkstar, goxin, icemilos, Istman, kolle.the.kid, ladro, Lazarus, mb1213, milosh, ozzy, raster12, robertino, savuni, Soncogor, Str2022, synergia, troki1971, Volkcho, zeka013, zlatkoa987, zziko