CODEWITHSUNDEEP
htmlcss
Matthew
Matthew

Reputation: 3

Image Repeating

[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>

Upvotes: 0

Views: 101

Answers (2)

Omar Fathy
Omar Fathy

Reputation: 121

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; }

Upvotes: 1

minsuga
minsuga

Reputation: 341

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;
}

Upvotes: 0

Related Questions