WordPress.org

Ready to get started?Download WordPress

Forums

how to call post title over the image (6 posts)

  1. xinfo
    Member
    Posted 4 years ago #

    hey guy's

    i am trying to call the post tile over the image with black back ground

    i am able to call only below the image not above the image

    any body here out to help for this trick

  2. Spencer Hill
    Member
    Posted 4 years ago #

    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!

  3. xinfo
    Member
    Posted 4 years ago #

    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>
  4. Spencer Hill
    Member
    Posted 4 years ago #

    Can you send me a link to the page we're discussing?

  5. xinfo
    Member
    Posted 4 years ago #

    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

  6. Spencer Hill
    Member
    Posted 4 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags