I want to get rid of all white spaces from my website in html , the more I move my text to the right the more the space whitespace it creates on the right side of the page. Like you see in the photos there are a lot of whitespaces I suspect it is the elements creating these spaces , can someone tell me how to get rid of it . if anyone can help me please do so.
.btn_earnmoney {
height: 100px;
width: 100px;
position: relative;
top: 350px;
left: 710px;
padding: 0;
border: none;
background: none;
}
.Balance_Text {
font-size: 150%;
position: relative;
top: -800px;
left: 10px;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
background-color: #f1dd84;
background-repeat: no-repeat;
}
.Background_img {
/* non available image replaced with dummy image */
background-image: url("https://dummyimage.com/300x300/d936d9/000000&text=some+background+image");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-color: #f1dd84;
}
<!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.0" />
<title>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<div class="Background_img"></div>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
What I would do:
index.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.0" />
<title>BuzzMoney</title>
</head>
<body>
<button class="btn_earnmoney" onclick="button_pressed()">
<!-- non available image replaced with dummy image -->
<img class="Image_of_btn" src="https://dummyimage.com/50x50/a6ff00/000000&text=earn+money" alt="EARN MONEY" height="100px" width="100px" />
</button>
<button class="btn_withdraw" onclick="withdraw_button_pressed_()"> </button>
<p class="Balance_Text" id="Balance">0 $</p>
<script type="text/javascript" src="earnmoney.js"></script>
<script type="text/javascript" src="disableRightClick.js"></script>
</body>
</html>
style.css
body {
background-image: url("yourUrlHere");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
You can find those properties for the background in this W3 link
Related
I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!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.0">
<title>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!
Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units
there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.
<!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.0">
<title>Loading Bar</title>
<style>
body{ overflow-x: hidden; }
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
I am trying to set background image .but I am background image come forward or above to current image . how to set background image ? background image mean it always behind the current image ?
here is my code
https://codesandbox.io/s/aged-lake-wx0tf?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>
<style>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,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"
/>
</div>
</body>
</html>
my background image come above the glass image.
Expected output. it should come behind the glass image
https://codesandbox.io/s/aged-lake-wx0tf?file=/index.html:0-5825
In css add this:
.abc img {
z-index: 100
}
and this:
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url("/a.png");
background-size: 100% 100%;
width: 100%;
height: 50vh;
z-index: 1;
}
The z-index property specifies the stack order of an element.
Also, visit: https://www.w3schools.com/cssref/pr_pos_z-index.asp
<!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>
<style>
.abc::after {
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(/a.png);
background-size: 100% 100%;
width: 100%;
height: 50vh;
}
</style>
</head>
<body>
<div class="abc">
<img
src="data:image/jpeg;base64,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"
/>
</div>
</body>
</html>
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!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>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>
I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
My question is how can i set full width and height background image for the header in Bootstrap like http://demo.evenfly.com/view?theme=SantaGo ( i am not expecting animations, i am expecting how to make background that fits in to screen like this)?
This is what i have done so far,
https://codepen.io/anon/pen/reYRBo
HTML:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
width:100%;
}
#jumboid{
width:100% ;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
header{
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('a.jpg');
background-size:cover;
}
At the end i'm expecting the result like this(if i take full page screen shot),
expected result
There is no need to use an extra image tag. Just set the background and the property background-size: cover
Try it like this:
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
background-size: cover;
}
<body>
<header>
</header>
</body>
Do you have an img tag inside the #jumboid?
In case you don't, you can easily fix it with a background-image on #jumboid.
Edit the css as following:
#jumboid{
width:100% ;
height: 100vh;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-size: cover;
background-repeat: no-repeat;
}
(forked) example: https://codepen.io/pimskie/pen/wGPOar
Simply use, using contain keeps your bg-img scalable and responsive-
background-size:contain;
OR if want to have a fixed header height and wan't to keep the image background scaled upto header's width-
background-size:100% 100%;
Hi try this code and Is this what you are looking for.
body {
margin: 0;
padding: 0;
width: 100%;
}
#jumboid {
width: 100%;
}
.bg-image {
position: relative;
background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
height: 450px;
background-attachment: fixed;
}
.bg-image img {
display: block;
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url('a.jpg');
background-size: cover;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
</div>
</div>
</header>
<div class="restofthecontent">
<p>your content</p>
</div>
</body>
</html>
Put your image in background of DIV by css not in <img> tag.
and give that DIV below CSS.
.Your_DV {
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}