add background-repeat property to the .child selector to be like this:
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat; }
You can try using the no-repeat property. Link to more info-https://www.w3schools.com/cssref/pr_background-repeat.asp
div {
background-image:url(w3css.gif);
background-repeat:no-repeat;
}
[photo of issue 1I am creating a mock CIA portal to help aid in my personal web dev skills and am running into issues that I cannot locate the answer on google or w3 schools. The issue, I have implemented a hover feature for an image in CSS using an URL to import the image and the image appears cut off on all sides. I went through and changed the size to contain, and the image is fitted inside the area fine but is tiled. please help with eliminating the tiling that is occurring. I used a tutorial I found on google that helped me with the hovering effect etc., that is where the parent and child section is coming from, and happens tp be the area where I am having the issue. Thank you for your time.
CSS:
h1 {
text-align: center;
font-family: courier;
font font-weight: bolder;
color: white;
}
body {
background-color: #152238;
background-image: linear-gradient (#23395d, transparent);
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.parent {
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: contain;
}
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
transition: all .5s;
}
HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="images/icons/eagle seal.ico">
<img src="images/eagle seal.png" alt="seal">
<head>
<title>CIA</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<h1>Central Intelligence Agency</h1>
</body>
</html>
You are welcome, you can accept the answer so people can find it easily. To mark an answer as accepted, click on the checkmark beside the answer to toggle it from greyed out to fill in green.