Home/ Questions/Q 776259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:25:08+00:00

How to make this type of image popping out of box using XHTML css.

  • 0

How to make this type of image popping out of box using XHTML css. without using whole box along with image as a background

alt text http://shup.com/Shup/330963/1104592352-My-Desktop.png

Only globe image will be image.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The globe needs to be a transparent png, and then style the box ignoring the image, padding and a border to get the desired look. Then, whack position: relative on the box, and position: absolute on the image inside it. Then use top: Xpx; left: Xpx; to position the image as you like.

    Edit: I’ve taken the code from the siulamvictor below, and edited it so it’ll work for you.

    <html>
<head>
<style type="text/css">

.box {
    position: relative;
    width: 260px;
    border: #000 1px solid;
    background: #d5d5d5;
    padding: 20px;
}

.box img {
    display: block;
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 5px; 
}

</style>
</head>

<body>

<div class="box">
  Text here.
  <img src="image.png" />
</div>
</body>

</html>

    Change the top and right properties to positon the image as you need it.

    • 0