What if Web page's background matters

Question

Hi,

I have a complex background image and images, that should be on exact positions of the background image.

How can I organize web page?

I can't use absolute positions, because I need to organize background to view it nice on any monitor, any resolution and any browser. It can be aligned to center or smth else.

Web page can be written just with Javascript or with a library like JQuery.

Here's an example of what kind of web page according to background image and images organization on it I'd like to have.

http://desandro.com/portfolio/

(background picture and points on it)

Thanks in advance.

EDIT

I'll add my answer in comments to the question.

Background will be a set of circles as matrix (m*n), taking an image(one circle) and repeating it on the page or it would be one background image with all this circles on it. But some of this circles should be separate img, not in the background part, so user could click on them, but he should not fill any difference, as if all circles are of the same type, just some of them click-able. If I could arrange it, so buttons could randomly change, it would be great. Hope, I explained all clearly.

Answer 1

Scaling a complex structure (e.g. a background image and lots of HTML elements) according to screen size is very hard, if not impossible, to achieve in pure HTML.

You would usually have a background image e.g. behind a centered element that has a fixed width. That element could have the position: relative CSS property so any absolutely positioned elements are positioned relative to the top left corner of that element (instead of the top left corner of the document.)

That seems to be the way the site you link to does it. The background image does not get scaled when the browser window's size changes.

Scaling a background image and positioning elements on it using relative units (left: 3.5%) may be possible but is impractical. Older browsers' image scaling methods are not optimal. (The scaling method can be set in more modern browsers.), and I expect huge cross-browser problems with absolute positioning using relative units.

Answer 2

I think you need to take a different look at how to approach this, some of the points in your question seem misguided.

If it is a portfolio design, like the one linked, then you need to be aware of 2 things:

1. The website screenshot is content, not presentational. People come to your portfolio to see what you have done, it is important that you know the different between a HTML img (content) and a background-image (presentation).
2. If you have the images scale they will look terrible at the varying resolutions. If you stretch the image or reduce it's size it will distort the image, which is not so nice to see on a portfolio. I advise you be pragmatic and opt that your images be a fixed size, which will also help in adding your hotspots on top of the image. This is how the author of the linked portfolio has approach things, with an additional background image to split the page up nicely.

Another thing to note is that the linked example uses canvas for drawing the points due to the lines connecting each one. Canvas makes this easy by being dynamic but is not supported in IE without the use of plugins. However, if you don't need to change these points very often then you can achieve a similar effect with just images and CSS.

The rest of this answer assumes you are using HTML4/XHTML. The linked example uses HTML5 (incorrectly in places), but without a specific requirement to use this technology I am assuming you are not using HTML5.

To start, consider each image and notes as a standalone block of content, contained in an individual div. As mentioned previously, the screenshot is a content image and should have it's own img tag. I'd also argue that the notes are a list of specific points, so they should be marked up as such.

<div class="article">
  <div>
    <img src="my_screenshot.png" alt="Appropriate alt text here" />
    <ul>
      <li class="note1">Here is an interesting part of the image</li>
      <li class="note2">This is also interesting</li>
      <li class="note3">Look at this! Pretty cool huh?</li>
    </ul>
  </div>
</div>

Mark-up: done. You can use this for each piece and simply replace the content as appropriate. If you think the order of the points is significant, replace the ul with an ol.

Next you want to think about the CSS. This will only be the basics to get you started, it should be enough to point you in the right direction. You need to set div.article to be positioned relatively in order to allow absolute child elements to be positioned relative to the top-left corner of that particular entry. Also set the wrapper div width, height and center it (also set the img dimensions). Finally, you need to prepare the li notes for positioning.

.article {position:relative}
  .article div{position:relative; width:800px; height:600px; margin:0 auto}
    .article img {display:block; width:800px; height:600px}
    .article ul,.article ul li {position:absolute; list-style:none; top:0; left:0; margin:0; padding:0}
    /* Debug styles */
      .article ul li {height:20px; width:20px; background-color:#ff0000}

Now it is just a case of plotting the points for each li. Use your image editor to work out the top left position (in pixels) of each point, then set each li.noteX as appropriate.

.article ul li.note1{top:156px; left:89px}

This should be enough to put you on the right path. Once you get your head around this you can start adding background-images for the notes and any JavaScript to add tooltips and so on. As for using multiple entries on a page, give each div.article a unique id and use that to target the li more specifically.

EDIT: Live example with a tiny bit of JS to show hovers. Excuse the lack of actual images, the horrid colours should be enough of a visual ;)