CODEWITHSUNDEEP
htmlcss
user5474108
user5474108

Reputation: 55

How to remove white border from image after cropping?

Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.

I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image. I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
       <!--animationlibrary githib url-->
        <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
    </head>
    <body>
    <div>
        <img  id="starrySky" src="img/stary_nebula.jpg" alt=""/>
    </div>
    <img id="earth" name="earthRotate"  src="img/my_round_earth.jpg" alt=""/>

    <style>
        img{
            position: absolute;
            left: -10px;
            top: -15px;

            height: 175px;
            width: 175px;
        }

        **this is what I have now....**
        div#earth{

            transform: skew(20px, -10px);
            transform: rotate(45deg);
            border-radius: 50%;
            overflow: hidden;
            width:150px;
            height:150px;
         }
          img#earth{


            background-image: url("https://s.yimg.com/fz/api/res/1.2           /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
        #earth{
            position: absolute;
            top: 0px;
            left: 600px;
            margin-top: auto;
            margin-right: auto;
            margin-bottom: auto;
            border-radius: 50%;
            -webkit-animation-name: earthOrbit;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 10s;
            overflow: visible;
        }
        @-webkit-keyframes earthOrbit{
            from{ -webkit-transform: rotate(0deg); }
            to{-webkit-transform: rotate(360deg);}
        }
        #starrySky{
            position: relative;
            top: -10px;
            left: -10px;
            width: auto;
            height: auto;
            margin-top: auto;
            margin-right: auto;
            margin-bottom: auto;
            text-align: center;
            font-size: 25px;
        }
    </style>
    </body>
    </html>

Upvotes: 1

Views: 1119

Answers (1)

warkentien2
warkentien2

Reputation: 979

just specify what size the parent <div> has and use overflow: hidden if necessary.

extra: to crop in different shapes, just transform the parent <div>, e.g.:

  • transform: skew(20px, -10px),
  • transform: rotate(45deg),
  • border-radius: 50%

Upvotes: 3

Related Questions