All geek questions in one place

How to fade out contour background images on Twitter

I am making a website with the Twitter Bootstrap Framework (version 3) and I want to use the awesome script made by Roko C. Buljan . See this StackOverflow post: How to fade background contour images?

This is my code:

HTML:

<!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 --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="img/favicon.ico"> <title>MY SITE</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/starter-template.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" rel="home" title="PAGE"> <img style="max-width:64px; margin-top: -8px;" src='img/logo.png'> </a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#info"><i class='glyphicon glyphicon-tasks'></i> Info</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="logout.php"><i class='glyphicon glyphicon-lock'></i> Logout</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="fakebg"></div> <div id='page' class="container"> <div class="starter-template"> <div class="row"> ... </div><!-- row --> </div><!-- starter template --> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bgchanger.js"></script> </body> </html>

CSS

 html, body, .fakebg { background: #000 none 0 50% / no-repeat center center fixed; overflow:auto !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #page { overflow:auto !important; } .fakebg { overflow:auto !important; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background: #000 none 50% / cover no-repeat; }

And bgchanger.js is a script from Roko.

Problem: My page is long (height), so the background is cropped at a certain height. This happens when I scroll.

What am I doing wrong?

+2
source share
1 answer

Well, it turns out that you need to install

 html, body{ height:100%;}

to allow .fakebg increase its size to 100% (from the parent html / body).

+2
source

Source: https://habr.com/ru/post/975167/

More articles:


All Articles