CODEWITHSUNDEEP
htmlcss
yarek
yarek

Reputation: 12044

How to create simple circle in css3 where I can move/resize the background image?

I tried with

    .mask {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        background: url(http://lapeniche.net/wp-content/uploads/2013/12/Chat.jpg) no-repeat;
       background-position: -50px -50px; /* this allows to move the image inside */
      /* but how to resize the CAT picture ???? */
    }
<img class="mask">

which is almost good: I can move the pic with backgound-position, but I CANNOT resize the background picture.

I tried with css3 masks, but this works only on chrome

  -webkit-clip-path: circle(100px at 150px 150px);
    -moz-clip-path: circle(50%, 50%, 30%);
    clip-path: circle(50%, 50%, 30%);

Any clue ?

The fiddle is: http://jsfiddle.net/nnr64y3b/

The goal is to create a rounded circle where I can move the position of the inside image and the dimensions of the of inside image

Upvotes: 0

Views: 74

Answers (1)

evu
evu

Reputation: 1071

You can use:

background-size: x% x%;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Your fiddle: http://jsfiddle.net/nnr64y3b/2/

Upvotes: 1

Related Questions