how can i get rid of an unwanted border around bg image?
Question
having issues identifying/getting rid of a border around my full screen background image, or finding an alternative for its code that won't cause this problem. sorry, very beginner.
here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon"/>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<title>xx</title>
</head>
<body>
<div class="bg">
<p>content</p>
</div>
</body>
</html>
here is the css
body, html {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
.bg {
/* The image used */
background-image: url("bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thank you in advance.
3 answers
solution1
0 2021-05-12 10:25:35
If you're talking about the margin, you just need to add "*" to your "body, html" styling. This gets rid of the margin/padding for all elements in the dom.
body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
solution2
0 ACCPTED 2021-05-12 10:35:23
Use below code it will remove all problem, on using '*' selector it will apply to all the elements in the DOM.
*{
padding: 0;
margin: 0;
}
body, html {
height: 100%;
color: #cccccc;
text-align: center;
}
.bg {
/* The image used */
background: blue;
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
solution3
0 2021-05-12 10:45:59
May be you are missing to add box-sizing property.
At the top of your CSS file add this...
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Then add separately
html, body{
margin: 0;
padding: 0;
height: 100%;
color: #cccccc;
text-align: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.