Give These two properties
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
To stop image from repeating “background-repeat” and to size for appropriate size “background-size”
You may need something like that. While using background-image, background repeating is by default on – so you need to set background-repeat property to no-repeat. And you need to adjust the background size and position as well as defining height of 100% for it and it’s parent(in this case body).
html, body {
height: 100%;
}
#bg-image {
background-image: url("https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-repeat: no-repeat;
height: 100%;
background-size: cover;
background-position: center;
}
#form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#form input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}<body>
<div id="bg-image"></div>
<form id="form">
<input placeholder="write here..." >
</form>
</body>well your code is ok but when you use background-image by default it is going to repeat image until it fill element. you have to use background-repeat: no-repeat; to prevent it and take note it is not good at term of responsive to give body a background-image better use div instead. you can also use background-size: cover; to make sure image always fill whole element
you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.
background-repeat: no-repeat–> will make the background image is only shown once.
background-size: cover–> make the background image cover the entire background area.
background-position: center center–> make the background image be positioned in the center of the element (in this case, the body element)
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}You may need something like this. You can make it easy with display:flex and for background you can use no-repeat.
html, body {
height: 100%; // FOR HTML AND BODY HEIGHT
}
body {
background: url("https://ak.picdn.net/shutterstock/videos/1027045598/thumb/1.jpg"); /* BACKGROUND IMAGES */
background-repeat: no-repeat; /* NO REPEAT BACKGROUND IMAGE */
height: 100%; /* BODY HEIGHT */
background-size: cover; /* BACKGROUND SIZE */
background-position: center; /* BACKGROUND POSTION */
display: flex; /* FLEX FOR TAKE DIV IN CENTER */
justify-content: center; /* LEFT RIGHT CENTER */
align-items: center; /* TOP BOTTOM CENTER */
text-align: center; /* TEXT AND IMAGES CENTER */
}
input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
} <div class="center">
<img src="https://www.nicepng.com/png/full/166-1667158_dan-howell-signature-png-vector-black-and-white.png" width="150" vspace="20" border="0" alt="Hmmmm 404?">
<form>
<input type="password" style="background: ghostwhite;
font-size: 18px;
border: 1px solid lightgray;
width: 500px;
border-radius: 50px" />
</form>
</div>Here I create one simple demo.
I hope it’s help you 🙂
So, I’m working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.
As seen here when I zoom out the background image duplicates.
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
}
.content {
margin: 0 auto;
position: relative;
width: 500px;
z-index: 999;
}<!DOCTYPE html>
<html>
<head>
<title>The Sandbox</title>
<meta name="description" content="">
<meta name="author" content="Hades">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
<center>
</div>
<img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
</div>
<form>
<input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
</form>
</div>
</center>
</body>
</html>Any solution to this or am I just gonna have to bite the bullet?