Question 218288 in CSS Question posted in
Some basic documentation can be found here.

Css – 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!

Tags:

2

Answers


  1. 0

    Use three CSS properties:

    1. background-image with multiple border images like background-image: url(IMAGE1), url(IMAGE2), url(IMAGE3), url(IMAGE4)
    2. Position the images through background-position like background-position: top left, top right, bottom left, bottom right
    3. Specify the size of images through background-size like ‘background-size: 200px 80px`
    Login or Signup to reply.
  2. 0

    Try next:

    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 */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search