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
Related
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;
I'm trying to build my personal website where I have:
A canvas element that's 100% screen height and width, with z-index -1
The normal content in divs and section tags, with z-index 0
The nav element that's at the highest z-index on the page
This arrangement allows me to have the canvas as the background of the entire website, it doesn't scroll because it's fixed. The nav is fixed as well so it stays at the top of the page with scrolling. (By "fixed" I mean "position: fixed" set in CSS on that element)
The nav has a transparent background, so it's "see-through", which shows the canvas content behind it, like this: navbar and canvas background
(sorry I don't enough points to embed images yet)
However, because the nav is transparent and fixed, content gets shown behind it on scroll, something like this image: content goes behind nav
I would like to have the content fade as it goes behind the nav's bottom edge, but I would also like to keep the nav transparent in order to show the canvas in the background. Here's what the fade would ideally look like: text fade example (taken from https://www.youtube.com/watch?v=-vbLeY-eDkQ but it uses text clip which doesn't apply to my case)
EDIT: Hiding the content without a fade is fine as well, the target is to make the content not appear beneath the transparent nav whilst showing the background canvas. It can be an abrupt cut-off instead of a gradient fade because after some more research I've found the fade effect I'm looking for isn't widely available or supported on all elements across browsers.
I have tried checking solutions from here: Hide scrollable content behind transparent fixed position divs when scrolling the page?
but they use a background image, which makes it relatively simpler. In my case, it's a canvas and the content of the canvas changes with time.
Here's my current webpage structure (Note: the CSS classes are from TailwindCSS but the naming is self-explanatory.
I'm also using React)
<body class="bg-dark m-0">
<nav id="nav_section" class="
fixed
block
overflow-hidden
font-body
z-20
xl:right-0 xl:mr-16 xl:inline-block xl:bottom-auto
w-full">
</nav>
<div id="vector_container" class="fixed left-0 z-0 h-full">
<canvas id="vector_canvas" class="w-full h-full stroke-2"></canvas>
</div>
<section id="first_screen_block" class="h-screen relative overflow-hidden">
<div id="corner_block" class="absolute bottom-0">
<div id="big_name_container"></div>
<div id="click_button_container" class="xl:m-16 xl:ml-12"></div>
</div>
</section>
<section id="second_screen_block" class="h-screen relative xl:mt-64">
<div id="scroll_work_container" class="h-threequarters">
</div>
<div id="work_showcase_text"
class="absolute bottom-0 xl:font-semibold font-display xl:ml-12 xl:text-8xl text-secondary">
<span class="text-primary">Work</span>
showcase.
</div>
</section>
</body>
Is there a way to achieve this with CSS and/or JS?
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with src attribute set to the content file you would like fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details in the code below.
Demo: https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has special properties, that by default set the body element height to match the screen. Although it still allows to scroll the inner content. I add and extra background div for the text as well. It provides a better reading experience. Have a look at my solution it may help you solve your problem. If you have any questions don't hesitate to ask.
Demo : https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
Tell me if you would be interested in a JavaScript version, for better browsers support. Thanks
By making the color of the nav transparent, you will be able to see through it to the canvas below. Since you did not provide your CSS for your classes; I threw together some new HTML instead. You can see the transparency effect below.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillText("Hello World! This is text on a canvas that is behind the nav", 10, 10);
.nav-wrapper {
height: 60px;
top: 0;
right: 0;
left: 0;
position: fixed;
z-index: 5;
background-color: #00000044;
}
#myCanvas {
z-index:4;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin:0">
<div class="nav-wrapper">
<nav>
a simple nav
</nav>
</div>
<div style="position:fixed;top:0;left:0;bottom:0;right:0; background-color: lightblue;z-index: 4 ;">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>
I am creating a home page for a website and I am attempting to copy part of the background img to use as a nav link so i can manipulate it. When i design the page every thing will look good but when i view on different screens the overlay is thrown out of align.
I have tried to implement screen.width and screen.height, from JavaScript, to capture the sizes and pass them as a var into HTML code. Then i use HTML top % and left/right %
to adjust the overlaying nav to match up with the background img.
<script>
//capture the screen size
var w =screen.width;
var h = screen.height;
</script>
<style>
body {
background:url("screen.jpg")no-repeat left top fixed;
background-size: w h;
}
#b1{
background-size: 180px 70px;
background: no-repeat left top fixed;
padding: 130px 50px;
color: white;
text-align: center;
background-image: url("b1.png");
margin: 0;
position: absolute;
top: 55.3%;
left: 11.5%;
transform: translate(-50%, -50%);
Does anyone have a fix for this? is it a HTML or JavaScript issue?
#JohnLiebig a couple of things. When you are working within CSS you should not be using HTML or JS related variables/methods. If you would like to use CSS variables the formatting can be found here.
The below snippet was found on MDN under 'background-size.'
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
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 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).