I loaded background image in css for my web app, but problem is that before image is loaded it shows me first, elements of html code and white background ? Is this problem with Laravel or someone knows solution ? Also size of image is only
Example: http://559c8451.ngrok.io/login 267Kb,
app.blade.php
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
@include('inc.header')
@include('inc.nav')
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<div class="container">
@include('inc._messages')
@yield('content')
</div> <!-- /container -->
@include('inc.footer')
</body>
</html>
app.css body {
background: url(/images/images.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
max-width: 940px;
}
#header{
height: 120px;
background-color: #007ab3;
padding: 20px;
padding-left: 100px;
}
.navbar {
position: relative;
min-height: 30px;
margin-bottom: 20px;
border: 1px solid transparent;
z-index: 1;
border-radius: 0;
}
.navbar-inverse{
background-color: #004666;
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
}
.nav>li>a {
padding: 0px;
padding-left: 10px;
padding-right:10px;
color: white;
padding-top: 3px;
font-weight: 500;
font-size: 1.2em;
}
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.tablica{
float:left;
}
td{
text-align: center;
width: 10%;
}
th{
font-size: 10px;
}
.table {
width: 90%;
}
.navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 2px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.container>.navbar-header, .container-fluid>.navbar-header, .container>.navbar-collapse, .container-fluid>.navbar-collapse {
background-color: #004666;
margin-right: -15px;
margin-left: -15px;
position: relative;
float: none;
}
th{
text-align: center;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire