I am trying to load a simple webpage that has an image that covers the entire page background. However, when the page is first loaded, there is a noticeable white flickering for a split second as the image is being loaded. I have already tried suggestions such as but to no effect. Here is my code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
Does anybody have a solution to remove the flickering effect?
You can set .bg with opacity 0, then with jQuery once the page is done loading add a class set with opacity 1.
If you want a "fadein" effect simply add a transition.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: opacity 1.3s ease-out;
opacity: 0;
}
.bg.visible{
opacity: 1;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(window).on("load",function(){
$('.bg').addClass('visible');
});
});
</script>
</html>
Maybe not the best solution but it works for me.
If you want an image that covers the entire page background, you should directly set it for the <body> element like this:
body {
background-image: url(your_url/your_image.png);
background-position: center; // to center the image
background-repeat: no-repeat; // to not repeat the image
background-size: cover; // to cover the element
background-color: #000; // fallback if the image is not available
}
or with the CSS shorthand more compact:
background: #000 url(your_url/your_image.png) no-repeat center;
background-size: cover;
Related
Hi i am new to javascript, i wanted to do a scrolling show and hide for my 2 divs, however the one i did is currently when scroll it change to bg-2 already but the text is like cut. its not the exact same position as bg-1. Can i ask for help?
This is the code:
https://codesandbox.io/s/hopeful-estrela-zfkih7?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div style="position: fixed; top: 0; width: 100vh; height: 100vh;"></div>
<div class="bg-1" id="bg-1">
This is testing UI
</div>
<div class="bg-2" id="bg-2">
This is another testing UI
</div>
<div class="bg-3">
This is third testing UI
</div>
</body>
</html>
<style>
.bg-1 {
height: 80vh;
background: blue;
position: relative;
z-index: 99999;
}
.bg-2 {
display: none;
height: 80vh;
background: red;
position: relative;
z-index: 99999;
}
.bg-3 {
height: 50vh;
background: pink;
}
</style>
<script>
window.addEventListener("scroll", function () {
var elementTarget = document.getElementById("bg-1");
var elementTargetRewards = document.getElementById("bg-2");
console.log("window.scrollY", window.scrollY);
console.log("elementTarget.offsetTop", elementTarget.offsetTop);
console.log("rewards", elementTargetRewards.offsetTop);
let lastScrollTop = 0;
if (window.scrollY < elementTargetRewards.offsetTop - 100) {
console.log("up 1");
$("#bg-2").show();
$("#bg-1").hide();
} else if (window.scrollY < elementTarget.offsetTop) {
console.log("up 1");
$("#bg-1").show();
$("#bg-2").hide();
} else {
// console.log('down 1');
$("#bg-2").show();
$("#bg-1").hide();
}
lastScrollTop = elementTarget.offsetTop;
console.log("last", lastScrollTop);
});
</script>
Desired output when scroll:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('img_parallax.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<p>In this example we have turned off parallax scrolling for mobile devices. It works as expected on all desktop screens sizes.</p>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
<div class="parallax"></div>
</body>
</html>
I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!
This is my HTML and JS code that I have written so far.
<!DOCTYTPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="menu menu-open">
<header>
Menu
<nav class="menu-side">
This is a side menu
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle') .bind('click', function(){
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
$(".menu").css({"height":$(window).height() + "px"});
});
</script>
</body>
</html>
This is my CSS.
.menu{
overflow-x: hidden;
position: relative;
left:0;
}
.menu-open{
left:231px;
}
.menu-open .menu-side{
left: 0;
}
.menu-side,
.menu{
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left:-231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-toggle{
z-index: 1;
}
I think all you need to do is add a background image to the class you add to the body when the menu is open if I understand the question correctly.
.menu-open {
background-image: url('your-image.jpg');
}
You can simply add a div into a body (so you can have more flexibility to manipulate with the content):
<body>
<nav></nav>
<div>
<p>Menu</p>
</div>
</body>
Then use CSS to fill the window with the background and set style of your navigation:
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh; /* Relative to 100% of the height of the viewport (browser
automatically recognizes height of the window) */
box-sizing: border-box;
}
/* Adjust body size to the html */
body {
width: 100%;
height: 100%;
display: flex;
}
nav {
width: 200px;
height: 100%;
}
div {
width: 100%;
height: 100%;
/* Background resizes automatically when menu appears */
background-image: url('yourimage.jpg');
background-size: cover;
background-repeat: no-repeat;
}
And animate navigation with jQuery:
$("p").click(function() {
$("nav").animate({width:'toggle'}, 350);
});
I have a website in which I want there to be a picture that is as displayed at 100% width and 100% height with a button on it that scrolls the page the height of the window. I want this button to be centered vertically and horizontally but everything I try doesn't work and i cannot seem to get it to scroll either. I will take an answer for either problem.
https://jsfiddle.net/cityFoeS/278dcyqg/
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
background: -webkit-linear-gradient(left top, black, #404040); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, black, #404040); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, black, #404040); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, black, #404040); /*Standard syntax (must be last) */
background-repeat: no-repeat;
background-attachment: fixed;
}
#start {
color: white;
background: url('http://www.wallpaperup.com/uploads/wallpapers/2013/05/16/86283/a5d366f61be34ae146c3acc00e288ade.jpg') no-repeat center center fixed;
height:100%;
width: 100%;
padding:20px;
box-sizing: border-box;
}
#reading {
height: 100%;
width: 100%;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function scrollWin() {
var h = window.innerHeight;
window.scrollTo(0, h);
}
</script>
</head>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<body>
<div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>
<div id="reading"></div>
</body></html>
Your problem is in the HTML, <div id="start"><button id="start-reading"onclick="myFunction()">Start Reading</button></div>
Look at the onclick part, you are calling a function that doesn't exist.
You could just change it to the correct function name and it would work but I have instead made a fiddle with the best practice:
https://jsfiddle.net/278dcyqg/1/
You should try and avoid using onclick on the actual HTML tag, and try to handle all events through JavaScript
I would like my css image to cover the whole screen, I am randomly choosing an image from a JS array. It is showing the image, but is not showing a Perfect Full Page Background Image.
main.html
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id = "button1">Click</button>
<script src = "main.js"></script>
</body>
</html>
main.js
document.getElementById("button1").addEventListener("click", function(){
showImage();
});
...
function showImage(){
document.write('<img class = "bg" src="'+theImages[whichImage]+'">');
}
main.css
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
What kind of css is that? I don't recommend using vw/vh either.
You'd be best off using standard background sizes and positions like
/*background-image: url(../images/background.png);*/ optional
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
and you could always add
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
for total cross-browser compatibility
I agree that setting the document.body.style['background-image'] attribute would be the best way to go, especially since it allows you to cope with the image shape not matching the screen shape (fix using background-position and background-size). If you still want to use an <img>, you can use the CSS3 length units vh, vw. Support for modern browsers can be found here.
img.bg {
width: 100vw;
height: 100vh;
}
Notice the image will not become higher than the view-port, even if the body element does (i.e. there is a scroll-bar).
I cannot change the width of an image that uses parallax scrolling code i copied from a tutorial. I know in the image example the div box and image don't line up perfectly either but for some reason with my wallpaper sized image which i didn't use because it was too big as an example lines up perfectly so don't worry about the div spacing issue.
Jsfiddle - https://jsfiddle.net/fouvdjm8/1/
HTML CODE
<html>
<!doctype html>
<head>
<title>Parallax Scrolling Tutorial</title>
<!-- CSS Code -->
<link rel="stylesheet" href="style.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article></article>
</section>
<div id="box"></div>
</body>
</html>
CSS CODE
body{
margin:0;
padding:0;
}
#home {
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#box {
height: 1000px;
width: auto;
background-color: blue;
}
JS CODE
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
your css home class should look like this
#home {
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: auto;
position: relative;
}