Autor Zpráva
robbie
Profil
Ahoj, nemohu vyřešit jak pokrýt celou obrazovku pozadím mobilního zařízení, background image mám velikosti 2200px x 1400px , ale když zkouším zobrazení stránky na mobiu, tak mi zde zůstává ošklivý bíý pruh na spodku stánky a já bych chtěl, aby obrázek na pozadí pěkně pokryl celou stánku. Děkuji za pomoc

kod:
<body style="background-image:url(images/rocks.jpg); background-repeat:no-repeat; background-attachment: fixed; ">
robbie
Profil
nevite nekdo prosim, proc mi toto nefunguje? dekuji

body{
  background:url(images/rocks.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
juriad
Profil
Hádám, žes našel tuto stránku: css-tricks.com/perfect-full-page-background-image
Kdybys četl pozorně, píše se tam jak je to správně: „We'll use the html element (better than body as it's always at least the height of the browser window).“
robbie
Profil
Přidávám kod k nahlednutí, ani při změně z body{} na html {} ve style , beze změny, naopak se nahoře ve stránce se udělal bílý pruh, který nevím jak odstranit a responsivní button MENU nejde při zmenšení v pravo nahoře vidět:( Děkuju opravdu za pomoc

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Test template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    
    <!-- Custom Css style-->
    <link href="css/global.css" rel="stylesheet" type="text/css"  >
    
    <!-- Icons-->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
     
      <style>
      
      .container-full {
  margin:0 auto;
  width: 100%;
  
  }
      
      @font-face {
    font-family: Rakoon; /* deklarace fontu */
    src: url("font/Rakoon_PersonalUse.ttf");  /* propojení na umístění souboru */
}

li a {text-decoration:none;
    color: white;
     font-family: Rakoon;
      font-size:25px;}
          
ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;   
    }
          
html  {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
    }
</style>
  </head>
  <body>
  <div class="container-full">
            <div class="row">
                    <div class="col-md-12  col-sm-12">
    
    <nav class="navbar ">
  <div class="container-fluid " >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <img src="images/vimeo2.png" alt="vimeo" style="margin-top:-10px;"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" style="background-color:green; border-radius:10px;"><a href="#">Join<span class="sr-only">(current)</span></a></li>
        <li><a href="#">On Demand</a></li>
         <li><a href="#">Create</a></li>
          <li><a href="#">Watch</a></li>
       </ul>
    
      <ul class="nav navbar-nav navbar-right">
        <li  style="background-color:black; border-radius:0px;"><a href="#">Login</a></li>
       
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div> <!-- END COL-MD-SM-->
</div> <!-- END ROW-->    

                <div class="row">
                    <div class="col-md-12  col-sm-12">
                        
                
                   <div  ><p  style="color:white; font-size:19px; text-align:center;position:relative; top:390px;"">Edit and share your home made videos on smart phones.</p></div>
                   
                  <div style=" text-align:center; position:relative; top:400px;" > <button type="button" class="btn btn-danger  " style="border-radius:20px;"><i class="icon-apple"></i> Download for free </button></div>
  
 
    

   
          </div><!-- END COL-MD-SM-->
     
      </div><!-- END ROW-->
    </div><!-- END Container fluid-->
    
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Tomášeek
Profil
robbie:
Proč proboha chceš nechat stahovat mobilní uživatele obrázek takových rozměrů a datové velikosti? K čemu jim bude kromě plýtvání FUPem? Dodej jim obrázek v nějakém normálnějším rozlišení.
Robbie
Profil *
Tomášeek:
Mam to tedy udelat pomoci media query? Myslel jsem, ze bootstrap si s tim poradi...

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: