If I understand you write, you basically want text to appear over your image, is that correct?
If so, here is an example of how to do this:
<head>
<style type="text/css">
.title {
position: absolute; /* This is what's most important */
z-index: 2;
}
.image {
position: absolute; /* This is what's most important */
z-index: 1; /* You can put any number here, but 1 means it is always in the background, anything with a hire number means it appears "over" anything with a lesser number */
}
</style>
</head>
<body>
<p class="title">Your title</p>
<img class="image" src="path-to-your/image.png" />
</body>
Hope that helps!
Thread Starter
xinfo
(@xinfo)
well i want to show only post title over the image
i tried placing code posted below
when i have position :absolute;
my title run away down
if i have position:relative it show below the image
code here ` #content .post .text {
background:transparent url(images/shade.png) repeat scroll 0 0;
bottom:0;
color:#FFFFFF;
left:0;
padding:4px;
position:relative;
width:150px;
display:block;
}`
<div class="post">
<div class="thumb"><a href="<?php the_permalink(); ?>">
<?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a></div>
<div class="text">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></div>
</div>
Can you send me a link to the page we’re discussing?
Thread Starter
xinfo
(@xinfo)
opps just now i noticed your reply
well i am working in local server i don’t have online development server
here is my link for the theme which i modified
http://www.mediafire.com/?sharekey=20ea01b901ca0f6090a82c7bb0fad7ade04e75f6e8ebb871
Try changing your style from position: relative to position: absolute; and ad top: 0;
If that fails, can you post all your code for the relevant pages and problem?
