Search code examples
cssbackgroundbackground-image

How can you make an image background just in the corner?

I’m wondering how I can make a background only show up in the corner (and the other 3 corners around the content) like shown in the picture below… namely:

  • I obviously can’t have a big image and the content inside of it, so I assume it’ll have to be 4 separate images
  • I’m assuming it has to be an image because you can’t draw that kind of shape in css
  • I don’t think there’s a way to have an image that the background is transparent, right?

background image

Any and all help would be appreciated!

Solution

  • Try next for one corner:

    div.image {
    background-color: #fff; /* Set default background color, same that background's base color */
    background-image: url("corner.png"); /* Set transparent image for corner */
    background-position: right top; /* Set positioning */
    background-repeat: no-repeat; /* Disable multiple background images  showing */
}

    Or this for multiple backgrounds:

    div.image {
    background-color: #fff;
    background-image:
        url("corner1.png"),
        url("corner2.png"),
        url("corner3.png"),
        url("corner4.png");
    background-position:
        right top, /* Set positioning for corner 1 */
        right bottom, /* Set positioning for corner 2 */
        left bottom, /* Set positioning for corner 3 */
        left top; /* Set positioning for corner 4 */
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    More informathion you can find here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds

    Also you can draw same shape by using SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial