Question

Looking at this site I’ve noticed that the background image that displays the page bleeds out of the sides of the monitor. Is there a way to fix this?

img src=”img/laptop.png” id=”laptop” class=”tour” alt=”laptop” />

The laptop is a png with a transparent center. I was then apply a class to the laptop which would apply a background image behind the laptop. ie

.tour { background: url(“../img/tour.jpg”) center top no-repeat; }

The problem occurs when some of the images are larger than the width of the laptop

Answer 1

The simplest way would be to make the background of the image of the laptop white, which would then cover up the part of the image which ‘bleeds out’.

Another quick solution would be to resize all the background images so that they fit properly within the monitor.

I think the way to do it properly is to have an absolutely positioned element which fits within the bounds of the laptop screen and shows the image.

Something along the lines of

<div class='image-container' style='position: relative;'>
    <div id='background' style='position: absolute; left: 100px; right: 100px; top: 30px; bottom: 120px;></div>
    <img src='img/laptop.png' />
</div>

This would need some proper measurement/testing of the actual margins on the image, and would need changes to the javascript and css to work/look right.