Photoshop Question posted in
The official user guide can be found here.

How to add text and image into one link and display it over that image on site? – Photoshop

Can you give me advice how to display text over image. Text is variable i can’t workaround it with photoshop ? Image is responsive image is centered and in link bakcground is repeated. Width and height is ok. Thank you very much.

How it should looks like:

image_with_text

How it looks now:

image_without_text

Image repeated on X:

image_repeated

CSS:

a.elipsis{
    background: url('showmore-bg.png') repeat-x;
}

HTML:

<a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#">
  show more <!-- text that should be over image -->
  <img style="position: relative;" class="cond-arr" src="/css/show_more.png" alt="show_more" />
</a>
Tags:

4

Answers


  1. 0

    I don’t know how much you can change your approach but you could have a div in which you would have your anchor and in CSS you could set the background for that div to be your image and set the dimensions of the div to bew exact the same size as your image.

    Check this: http://jsfiddle.net/jHmP7/1/

    <div class="imageContainer">
    <a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#">Some Text</a>
</div>


.imageContainer {
       width:200px; 
       height:100px; 
       background-image: url(your image);
 }
    Login or Signup to reply.
  2. 0

    You just just put your image as a background of your link and wrap it in a div.
    You give your link a fixed size, and your wrapper will handle the responsive part.

    It would give something like this:

    HTML:

    <div class='wrapper'>
    <a style="display:block; text-align: center" class="elipsis" href="#">
    show more <!-- text that should be over image -->
    </a>
</div>

    CSS:

    a.elipsis{
    background: url('show_more.png') no-repeat;
    width: xxx; /* width of your image */
    height: xxx; /* height of your image */
    margin-left: auto;
    margin-right: auto;
}

div.wrapper {
    background: url('showmore-bg.png') repeat-x;
    width: 100%;
}

    In case it doesn’t work please provide a jsfiddle so we can work on it.

    Login or Signup to reply.
  3. 0

    Maybe it’s not the best solution, but it is the only solution I can get with your current markup. I’ll give absolute positioning to text and relative to link. After that, with jQuery I will calculate position of text, based on width of link and width of whole text.

    $(document).ready(function(){
    function center(){
        var link_w = $('#link').width();
        var text_w = $('#text').width();
        $('#text').css('left', link_w/2-text_w/2+'px');
    };
    center();
    $(window).resize(function(){
        center();
    });
});

    http://jsfiddle.net/NcxhL/1/

    Login or Signup to reply.
  4. 0

    Maybe the following will do what you are looking for.

    CSS

    .elipsis {
    margin: 0px;
    height: auto;
    width: 100%;
    text-align: center;
    display: block;
    overflow: hidden;
    background-image: url(showmore_bg.png);
    background-repeat: repeat-x;
}
.elipsis .showmore{
    background-image: url(showmore.png);
    height: 32px;
    width: 295px;
    bottom: 10px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

    HTML

    <a class="elipsis" href="#">
<p class="showmore">show more</p>
</a>

    Example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search