Member Avatar for Violet_82

Chaps, I have a problem, and I am not sure how to get around it. Basically, I have a background image (it sits in a span) which is roughly 40px x 40px (bigger than the span) and it gets cropped off. How can I display the whole image even if the element is smaller than the image? here is a link that illustrate the problem http://antobbo.webspace.virginmedia.com/various_tests/background/images.html
and here is some code:

<!DOCTYPE html>
<html>
    <head>
        <title>Background image</title>       
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="leftCol">
            <p><span class="image">Here is an icon as background image</span></p>
        </div>
        <div class="rightCol"></div>
    </body>
</html>





.leftCol, .rightCol{
    float:left;
    width:500px;
    height:500px;
}
.leftCol{
    border:1px solid red;
}
.rightCol{
    border:1px solid blue;
}

.leftCol span.image{
    background:url("chromeIcon.jpg") no-repeat 0 50%;
    padding-left:50px;
}

The idea is here is that I won't resize the image, is there a way I can display the whole image, so that it overflows the span? The overflow property doesn't help and same with line-height. I am a it lost.
cheers

  • 2 Contributors
  • 2 Replies
  • 320 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Violet_82

Recommended Answers

All 2 Replies

Member Avatar for pixelsoul

There is not a way (or good way) to do that. A background can't exist passed the borders of the element that you are specifying the background for.

You could just do the below though, and that will show the entire image.

.leftCol span.image{
    background:url("chromeIcon.jpg") no-repeat 0 50%;
    padding:13px 50px 12px 50px;
}
Member Avatar for Violet_82

Thanks, I did it in the end, adding this

 display: inline-block;
    height: 48px;
    line-height: 45px;

to the .leftCol span.image.
thanks anyway

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.