Dreamweaver image question

TriedandTested

TriedandTested

TriedandTested

Soldato
Joined
11 Jul 2004
Posts
16,147
Location
Neptune
What option do i change on an image place in a html page so that it can be moved around without affecting the position of the text? Like word wrap in Word.

Also, is there any way then to set that image as a watermark behind the text?

Thank you
 
I believe it will only be possible using css and html.

for the image you can either float it or use absolute positioning.

As for setting things behind each other etc use the z-index: 1-xx tag.

ie for image behind text.

image would have a z-index of 1, text z-index of 2.
 
MadMossy said:
I believe it will only be possible using css and html.

for the image you can either float it or use absolute positioning.

As for setting things behind each other etc use the z-index: 1-xx tag.

ie for image behind text.

image would have a z-index of 1, text z-index of 2.
Click to expand...

how do i adjust the z-index for the images and text?
 
Just messed about quickly would need to use absolute positioning to get the text over the image. Im not an expert or even that good at website coding so it is most likely the worst way of doing things but hey it works :P

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

.divtag {
width: 500px;
}

.textindex {
    position: absolute;
    font-size: x-large;
    left: 343px;
    top: 26px;
    color: #fff;
    font-weight: bolder;
}

body {
margin: 0;
padding: 0;
}

</style>

</head>

<body>

<div class="divtag">
    <img alt="" src="images/header/header.png" />
    <p class="textindex">This is some text</p>
</div>

</body>

</html>
Image can be anything you want.

In this case you wouldnt need to use z-index but if you were for example placing several images on screen that needed to be shown in a specific order ie backcgroun, foreground etc then z-index is the key. It only works with 'position: absolute;' though.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom