ZNHOO Whatever you are, be a good one!

Image and File


Add a file by markup.

Add a file by href.

Add an image by markup. Test

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%. Specifying only the width of images may cause a doubling or tripling of the cycles that many browsers must process to layout the new, resized page. While each of these cycles typically take less than a millisecond, they stack up, especially if there are multiple scalable elements on the page. Addressing height in the same declaration can reduce this issue. Hong Kong Night

Hong Kong Night A better, albeit more complex approach to fluid images is to measure the width of the image as a percentage of the overall width of the page. For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (500 / 1200 ) × 100 = 41.66%.

We can plug this number in as the width for the image; typically, this would be done inline, as each image will often be a different dimension. For this method, put the image before the text.

Place text over image, this is combination of background url and position. For background, the width and height of the image should be included. The border-radius is set to 10px which overwrites the default in poole.css file.

(some text ...some text ...some text ...)

(some text ...some text ...some text ...)

Place text over image, position not accurate.

some text ...

Place text over image, by table, position not accurate. No border-radius attribute here. So border angle is sharpe.

some text ...

Place text over image. border-radius is acctually attribute of img. Attention: border-radius, margin max-width and overflow is already specified in poole.css and lanyon.css files. Here is just a complete example to show the method. rgb(255,255,255) is called fallback color for compatibility issue in that some browsers does not support rgba. Similarly, this also applies to hsl and hsla.

(text accurately positioned)

Place text over image with CSS file support with css support. The znhoo.css style file is already added to _include/head.html.

(text to appear at the bottom left of the image)

(text to appear at the top right of the image)

Use the last two methods! They are very good and complete.


CSS Fluid Image Techniques for Responsive Site Design
Text Blocks Over Image
Background Images
CSS: Placing text over an inline image
fallback color