2

I am having a problem with an image getting cut off on the top, left, and right points of my div. When I don't set background-repeat: no-repeat; the image repeats on only those three points which makes an awkward feel to it.

----^----
<------->
----X----

The 'X' is the point that is not effected by this.

When I set background-repeat: no-repeat; it cuts those points off completely and leaves a box like shape rather then a circle.

The top is the most noticeable point out of the three

Tested in Chomre, Firefox, and Safari.

Here is the css:

#picFrame {
    height: 60%;
    position: absolute;
    border-radius: 50%;
    top: 15%;
    left: 50%;
    background-image: url("http://jpowell43.mydevryportfolio.com/me.jpg");
    background-size: cover;
    background-position: top center;
    /*background-repeat: no-repeat;*/
    overflow: hidden;
    border: 10px solid rgba(255, 255, 255, 0.6);
}

Finally, a fiddle: Demo

kinakuta
  • 9,029
  • 1
  • 39
  • 48
Josh Powell
  • 6,219
  • 5
  • 31
  • 59
  • what happens if you make the image 10px higher and 20px wider? – SamotnyPocitac Feb 25 '14 at 19:29
  • Using a pseudo element for the border may be a possible workaround: [fiddle](http://jsfiddle.net/ygFKD/2/) – Adrift Feb 25 '14 at 19:30
  • That is the biggest image size I have at the moment. I can give this a try and let you know. – Josh Powell Feb 25 '14 at 19:30
  • @Adrift that is indeed a work around, do you think this is due to the box-sizing? – Josh Powell Feb 25 '14 at 19:33
  • The border isn't supposed to cover the content. I actually think those three sides are the way it's supposed to work. The image overflow is what's preventing the issue at the bottom. If your image were square, the bottom would have the same issue. You need to move the image and enlarge it using a percent to make it go underneath the border. – brouxhaha Feb 25 '14 at 19:39

2 Answers2

4

Use background-position: -10px center to account for the 10px border, and make the background-size: 110%; so it expands horizontally to be covered by the border. Then set background-repeat: no-repeat

DEMO

brouxhaha
  • 4,003
  • 1
  • 19
  • 22
  • This is a solid work around! Thank you for all of the help, do you think this is due to the box-sizing? – Josh Powell Feb 25 '14 at 19:45
  • No. Read my comment above. This is how divs actually work. The border doesn't cover any content and isn't supposed to. Box-sizing only affects how width and height are calculated. – brouxhaha Feb 25 '14 at 19:51
0

I think you need to adjust the image width and height

http://jsfiddle.net/ygFKD/3/

SamotnyPocitac
  • 401
  • 5
  • 16