Skip to content Skip to sidebar Skip to footer

Html/css How To Wrap An Image With Another (liquid Layout)?

For a portfolio, I need to wrap all images with a computer image for presentation. I'm going to use something like this example to wrap images: Images must have fluid dimensions (

Solution 1:

Add the image as a background-image of a reziseable <div> and append a second div with another backgrund image.

like:

<divclass="laptop-bg"><divclass="laptop-content-bg"></div></div>.laptop-bg
{
   background-image:url(...);background-repeat:no-repeat;width:100%;background-size:contain;background-clip:border-box;position:relative;
}

.laptop-bg>.laptop-content-bg
{
   background-image:url(...);background-repeat:no-repeat;position:absolute;/*%toouterborder*/left:6%;top:6%;bottom:6%;right:6%;
}

Update: I did not think about the inner spaceing on rezising. You should try to estimate the distance between content and outer in percentage.

Update:

The best thing you can do, is to add the background-image as <img> in the document. Not as a background-grafik. This will be your canvas to place a inner div:

<divclass="laptop-bg"><divclass="laptop-content-bg"></div><imgsrc="http://i.stack.imgur.com/uS7Xm.png" /></div>

CSS

/* Like pointed out by @Pio, you should add a max-width*/.laptop-bg
   {
       max-width: 1000px;
   }


.laptop-bgimg
{
    max-width: 100%;
}

.laptop-bg > .laptop-content-bg
{
   /* background-image(url:...); */background-color:blue;
   background-repeat: no-repeat;
   position: absolute;
   /* % to outer border */left:17.5%;
   top: 17%;
   bottom: 22%;
   right: 18.5%;
}

Working fiddle: http://jsfiddle.net/Kq7ym/3/

Solution 2:

If i were you i would follow this way :

1) create laptop monitor-like div - Its just a div with thick black border + top left and top right rounded borders + 2 elements (green point and reflection) you can create it with CSS or use images.

2) create bottom part of laptop - Its also rounded div + shadow + cavity

Post a Comment for "Html/css How To Wrap An Image With Another (liquid Layout)?"