Is there a Firefox addon or a method for viewing an image behind my web design?

Question

i have a design that was done in illustrator and i exported it out as an image. i want to be able to have the image as a background and faded out. so while i do the html and css i can position everything exactly as the image has stated. i tried setting the image as a background and trying it like that but the background interferes with the content and its hard to see what im doing.

Answer 1

You could set the CSS opacity on the background image.

Firefox, Safari and most browser use the opacity property, whilst IE uses filter:alpha(opacity). Something like the following

body {
        background-image: url('path_to_image.jpg');
        opacity : 0.4;
        filter: alpha(opacity=40);
     }

Answer 2

The Pixel Perfect add-on does what you want, allowing you to overlay a transparent image so you can compare and line up the bits of the page correctly to match the image.