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

How to stretch and reduce background image for text label using css – Photoshop

I am designing a webpage that contains a background image
like arrow for label. I have designed the image in Photoshop.
My problem is that the image size is not expanding and reducing as
per text.
So please help me, what should I do? Is there any method to do this?

HTML:

        <label><span>First Name</span></label>

CSS:

        label
        {
        background-image:url('./images/lblimg.png');
        width:auto;
        display:inline-block;
        }


    span
         {
            line-height:50px;text-align:center;
         }
Tags:

3

Answers


  1. 0

    Use the style:

    background-size: cover;
background-repeat: no-repeat;

    With background-size:cover the image will grow as large as possible so that the background area is completely covered by it.

    Login or Signup to reply.
  2. 0

    you need to set the background-size property to 100% for both with and height.

    .bgimg{
    background-image: url(https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png);
    background-size: 100% 100%;
    font-size: 40px;
    color: yellowgreen;
}
    <span class="bgimg">
    div with little text :) 
</span>
<br />
<span class="bgimg">
    div with more and more and more text :) 
</span>
    Login or Signup to reply.
  3. 0

    You have two options, both using CSS3 background-size:

    1. Use background-size: cover: the background image will grow as large as possible until it covers the whole background area.

      • Pros:
        • The image will cover the whole area
        • The image will not be stretched
      • Cons:
        • As the image doesn’t stretch, just grows until it covers the whole area, some parts of the picture may not be displayed.

    2. Use background-size: 100% 100%: the background image will occupy 100% of the width and height of the container.

      • Pros:
        • The image will cover the whole area
        • The whole image will be displayed (no hidden parts)
      • Cons:
        • The image may be stretched (although this could be considered a pro, specially for the behavior expected in the question)

    In your particular case, the second option will be better as you want to display the whole arrow without risking some parts getting hidden.

    In your code, it would look like this:

    label
{
     background-image:url('./images/lblimg.png');
     background-size:100% 100%;
     width:auto;
     display:inline-block;
}

    Edit (as per CSS2 request by OP): This cannot be achieved exclusively with CSS2 unless you change the HTML code. In that case you would actually not be using a background-image, but directly an image that would be behind the text.

    This is how the HTML would look: 

    <label>
    <img src="http://lorempixel.com/400/200/animals/" alt="Random pic" />
    <span>First Name</span>
</label>

    This is how the CSS would look:

    label {
    width:auto;
    display:inline-block;
    position:relative;
}

span {
    line-height:50px;text-align:center;
    position:relative;
    z-index:2;
}

img {
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

    You can see an example of the CSS3 and CSS2 solutions on this JSFiddle: http://jsfiddle.net/othnjk5x/

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

Back To Top
Search