| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil |
#1 · Zasláno: 17. 12. 2016, 12:06:25
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 |
#2 · Zasláno: 17. 12. 2016, 20:11:53
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 |
#3 · Zasláno: 17. 12. 2016, 20:19:32
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 |
#4 · Zasláno: 18. 12. 2016, 15:34:36
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 |
#5 · Zasláno: 20. 12. 2016, 09:17:13
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 * |
#6 · Zasláno: 21. 12. 2016, 17:53:43
Tomášeek:
Mam to tedy udelat pomoci media query? Myslel jsem, ze bootstrap si s tim poradi... |
||
|
Časová prodleva: 8 let
|
|||
0