0

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
12
Views
4 Years
Discussion Span
Last Post by Violet_82
0

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;
}
0

Thanks, I did it in the end, adding this

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

to the .leftCol span.image.
thanks anyway

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.