|
 |
> Last time I checked, there are two ways to put an image into a web page.
> You can use the IMG tag, which inserts an image in amoungst the text.
You have to use CSS. There is a css-property called z-index, allowing you to
stack elements that have this property. There are "left", "right", "top",
"bottom" properties, allowing you to position elements with pixel-precision:
add style="position: absolute; left: 10px ; top: 10px; z-index: 2;" and
style="position: absolute; left: 20px; top: 20px; z-index: 3;" to a
div-element containg pictures and see what happens.
Note the "position" properties. They are important - read up on them.
Then you have a several css-properties for background: you can layer
div-elements one upon the other, and overlap them using "left", "top",
etc. - and each div-element can have a seperate background. The background
for each and every element can be aligned ("background-align" property) and
you can decide whether you want to repeat it or not. So you can position an
image within a div-element and have a backgound for this element. If the
background is a transparent image, the images and text below will show
through. Or, with IE, there are things called filters - neat things can be
done with them - but they are something only supported by IE, so best keep
away from them).
There are pitfalls, though. Not every browser supports css properly and you
have to make sure the browser is in the right mode. Mode is set by
HTML-DOCTYPE, I'd advise
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It can be very hard to debug a style. Firefox with the Firebug-Extension is
your friend.
If you really want to dig into this, you have to learn how css works. And
how to circumnavigate the various browser-bugs.
For a background that goes from one colour to another you can use your
paint-program, create a line with fill-properties starting at blue and
ending at white. Then put this 1-pixel line in the background property of
your [whatever div or document part you want it to be]. Set style=
"background-repeat: none; background-position: top; background-align: left;"
and you have got what you want. Of course there are pitfalls here, too.
To explain all this properly is like asking somebody how to do a macro with
sphere-sweep in povray - and why it sometimes gives rather unexpected
results and in which cases it does and what to use as remedy. Or lecture on
the finer points of photons in povray. Not easy, for obvious reasons.
Post a reply to this message
|
|
