How to allow an image to move behind text? 1

hotfusion · Dec 6, 2007

That's the question - How to allow an image to move behind text?
My scenario:
I wish to have a page with a centred heading logo (in a DIV), with images positioned absolute far top left & far top right. (To give you an idea, the outer images will be coloured light beams shining in from the outer top corners.)

The idea is that if the page is viewed on a smaller screen area the outer images - the light beams - will slide under the more important centred heading logo, preserving the display.

Now - I'd have thought that would have been simple and the order of the coding may have sorted this, but no.

I've searched about and looked into the use of 'Z-INDEX', but this apparently only works with absolute positioning and has no effect on the centred logo or the text immediately below it - the beams still slide right over the top and partially obscure the content.

Is there an easy way to achieve this most simple of tasks? Please tell me there is, as I'm losing my hair!

Many thanks for any help offered.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
My home page

kaht · Dec 6, 2007

Just set up the images as background images instead of using <img> tags. Here's an example using the logo from this site:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

p {
[!]   background:url([URL unfurl="true"]http://www.tek-tips.com/images/logo.gif)[/URL] top left no-repeat;[/!]
   color:#00ff00;
}

</style>
</head>
<body>

<p>
   text text text text text text text text <br />
   text text text text text text text text <br />
   text text text text text text text text <br />
   text text text text text text text text <br />
   text text text text text text text text <br />
</p>   

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

hotfusion · Dec 6, 2007

Thanks kaht for the rapid reply;
In this instance there will be either a background image or a colour other than the default white, and it seems that trying to set an image in addition to this is a no-no, although I will experiment further with your suggestion.

Have a look here at a personal site I made a while back, as it indicates exactly the same problem - two images far-left and far-right, a background image or colour, and the way the corner images slide over the title when the page width is reduced - this is what I'm trying to avoid. (No laughing please!) Not important here, but on the page I'm designing it will be:
http://myweb.tiscali.co.uk/andyspatch/index.htm

I'm currently thinking about setting the higher elements to an absolute positioning, simply in order to be able to make use of z-index, but I'm still trying to find out how to do this for a centrally positioned element.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
My home page

kaht · Dec 6, 2007

I'm currently thinking about setting the higher elements to an absolute positioning, simply in order to be able to make use of z-index, but I'm still trying to find out how to do this for a centrally positioned element.

Absolutely positioned elements are completely unnecessary for what you're trying to accomplish. Not to mention, they can be a bit clunky when designing a layout because they have the unfortunate effect of trying to position things around them - especially when resizing a browser. You start out with one absolutely positioned element, then before you know it you have to do it again to get the next one to line up beside the first, and then again and again until it trickles down and your whole page is aboslutely positioned.

With your problem, we can use what we know about background images and the way text floats on top of them to get the effect you're looking for. All you'll have to do is nest an extra layer of div or header element to supply 2 background images - one for the upper left and one for the upper right. Here's an example using tek-tips's logo, and google's logo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">



div#logoLeft {
   background:url([URL unfurl="true"]http://www.tek-tips.com/images/logo.gif)[/URL] top left no-repeat;
}

div#logoRight {
   background:url([URL unfurl="true"]http://www.google.com/intl/en_ALL/images/logo.gif)[/URL] top right no-repeat;
   height:120px;
   line-height:120px;
   text-align:center;
}

</style>
</head>
<body>

<div id="logoLeft">
   <div id="logoRight">
      This text appears above the images.
   </div>
</div>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

hotfusion · Dec 7, 2007

Thankyou kaht, I think that's what I needed - a different way of looking at the problem. This approach just hadn't occurred to me, so thanks again for pointing it out.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
My home page

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to allow an image to move behind text? 1

hotfusion

Technical User

kaht

Programmer

hotfusion

Technical User

kaht

Programmer

hotfusion

Technical User

Similar threads

Part and Inventory Search

Sponsor