image over background image

[jasonc]

i have used <div>'s before and thought i'd try this but it did not work

 

<div>

left

</div>

<div>

middle

</div>

<div>

right

</div>

 

what i am wanting to do is have a load of photos on the page i shall be using PHP to do this, but it is the layout that i am having problems with, thats why i am posting here and not in the PHP forum.

 

i attach a jpg of the sort of layout i would like to have.

 

can someone please help me with a simple CSS code that will place an image over a round edged image as a background. as in the jpg.

 

thanks in advance

 

[attachment deleted by admin]

[s1yman]

you need to be using your style sheet

e.g.

<div class="mydiv">

 

your css file should be something like;

.mydiv
        {
width:300px;
background-image:url(/background.jpg);
margin:5px;
position:relative;
float:left;
}

 

Is that the sort of thing you are looking for?

[efficacious]

not sure what you mean.. but i'm assuming it would be this

 

<style>
#MyDiv {
background-image:url('yourBack.jpg');
background-color:blue;
text-align:center;
}
</style>
<div id='MyDiv'>
<br />

<img src='YourPic' /><br />

YOUR TEXT

</div>

[obsidian]

If your sizes of the containing divs are always going to be fixed, a simple background image declaration is all that is needed:

 

CSS:

div.holder {
  background: url('your-background-image.jpg') no-repeat 50% 50%; /* centered in the background */
  text-align: center;
}

 

HTML:

<div class="holder">
  <img src="my-image.jpg" />
  <p>My Text</p>
</div>