SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Background-Position Property Not Working on Inline Image

    Hi all,

    I'm wondering why using the background-position property does not change what parts of an image are shown. This is an inline image that I'm attempting to show only a segment of. Changing the width of the image only shrinks the whole of the image.

    The page that the image is located on.

    The markup (image is on line 52, inside a table):
    HTML Code:
    <img src="../style/bar.gif" class="bar" width="120" height="16" style="background-position:0 0 -31px;" /><p class="rating">7.9</p>
    styles for the image's assigned class:
    Code:
    img.bar{/*background-image:url("bar.gif");*/ border:none; display:block; overflow:hidden; margin:0 auto; position:absolute;}
    Thanks for the advice,
    Tyler

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not clear what image you are referring to. Anyhow, background properties are for background images, rather than images embedded in the HTML. It sounds like it would be better to crop the image in Ps first, or perhaps you could use CSS clip, though I wouldn't go down that route myself. You could also have a container around the image with fixed height and width and set to overflow: hidden, I guess. But I don't understand what you are trying to do yet.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    As Ralph said it might be better if you explain what you are trying to do.

    Even if you used the correct background-position property you wouldn't see the change because the image is in front of any background you apply to that same image

    You have used this incorrect rule anyway:

    Code:
     style="background-position:0 0 -31px;"
    It should be:

    Code:
     style="background-position:0 -31px;"
    0 -31px not 0 0 -31px.

    If you want to manipulate an images background then you first have to hide the images foreground. You can do this by setting the width and height to zero in the css and then hiding the overflow. Then you add padding to match the image width and height so the background can show and only then can you manipulate the background properties to any effect.

    e.g.


    Code:
    img.bar{
    background:url(http://www.worldreviewgroup.com/style/bar.gif) no-repeat 0 0;
    width:0;
    height:0;
    overflow:hidden;
    padding:16px 0 0 120px;
    }
    img.bar{background-position:-31px 0}/* move image off to the left */
    Or add that last rule in your inline image if this is for a dynamic effect:

    Code:
    <img src="../style/bar.gif" class="bar" width="120" height="16" style="background-position:-31px 0;" />
    Note that you were trying to say 0 -31px which would have pulled the background image up and you would see nothing because the image isn't 31px high.

    However, it may be best for you to clarify what you are trying to do as the above may not be what you want.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul and Ralph,

    The original goal was to change the width of the bar image as found inside the table in the markup on line 52 without shrinking the entire image. It is useful to know that this background-position property only works as you described by setting the width and height to 0 and then applying some padding.

    However, as I've been discussing with ronpat, these bars are too small to grab the visitor's attention. I want to change it up and use vertical bars.

    The idea would look something like this (more or less). I like my idea of using an image that has a gradient that starts at red (for poor ratings) and becomes green at the end of the bar. It also needs another image behind it that serves as the measurement counter.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Tyler,

    Here are two versions of that table and graph:

    1a
    - 1a works satisfactorily in IE8.
    - Uses a gradient background color for the graph bar and falls back to a solid background color for IE8.

    2a
    - 2a works in more modern browsers; but NOT IE8.
    - Adds a graduated y-axis image.

    Both versions are surprisingly tolerant of resizing text.

    I had a very hard time successfully resizing a foreground image in a table cell. Maybe next week it will seem easier, but this week is was not. Part of it is cross-browser inconsistency. Not sure about the rest.

    The code can be selectively copied an pasted into your exising pages. Foreground images will have to be reinstated.

    I am not confident that this is efficient code... it seems too complicated. However, it DOES work in IE10, FF, Chrome, Opera. A little peer review might be very helpful.

    https://www.dropbox.com/sh/xbe0f5a8g1ee7mu/iMR1pOX761

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ronpat,

    It's too bad that 2a does not render properly in IE8 because I definitely like the y-axis a lot.

    Though, I think I'm going to work on changing up the table to appear more vertically oriented. There is going to be more than one bar in this table alone. This is a good starting point for me to take off from.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Such is the evolving nature of the design process .

    Yes, I was disappointed that I couldn't make the y-axis work adequately in IE8, too. A different "look" might work better, anyway. Thanks for the feedback and good luck!

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Image Display Strategy Must Not Be What I Wanted

    I'm trying to change what part of the inline image is displayed of the bar image. If I want a small height, the only thing I want displayed is the red bottom portion (where the gradient starts). Let's focus solely on that, so I can understand that technique.

    I made a quick graphic that depicts what I'm ideally trying to produce. It is here.

    I also made a test page that only has a table inside it just to focus on this one specific task of getting this table marked up.

    As Paul said in post #3, the code he posted may not do what I want because neither he nor Ralph had a clear idea as to what I was trying to do.

    I attempted that strategy he posted:
    HTML Code:
    <!-- line 15 -->
    <td class="graph"><div><span class="opaque" id="firstdateswedenoverall"><img src="style/bar.gif" class="bar" width="30" height="240" /></span><span class="yaxis"></span></div></td>
    Code:
    /* line 42 */
    img.bar{
    background:url("bar.gif") no-repeat 0 0;
    width:0;
    height:0;
    overflow:hidden;
    padding:240px 0 0 30px;
    }
    img.bar{background-position:0 30px;}

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to place the image at the bottom of the element and set the background-position to 0 100% and then shorten the image itself by adjusting the vertical padding. In that way you don't squash the image but just reveal more of it.

    e.g.

    Code:
    #firstdateswedenoverall{
    position:relative;
    }
    img.bar {
    background-position: 0 100%;
    }
    img.bar {
    padding: 200px 0 0 30px;/* adjust padding value between 0 and 240 to show image */
    position:absolute;
    bottom:0;
    left:0;
    }
    These rules are additional to yours and not replacements.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question It Works... Why Does It Work? + How to Get the Y-axis to Display.

    Yes, that definitely achieves what I desire.

    I understand the padding and why overflow is hidden. What I don't understand is why background-position is set to display, apparently, nothing different. What I construe the background-position:0 100%; line to mean is that the image is displayed 100% from the top. I don't know what purpose that serves. I went ahead and combined that in to the shorthand.

    Also, I have the image inside the HTML. Why is it referenced in the CSS as well?
    CONFUSING!!! ...CSS really kicks me in the seat of the pants.

    =======

    The other image-related issue is the y-axis image that needs to appear on top of the bar image. As you'll see in that same line in post #8, there is a span with a class of .yaxis that comes right after the bar image.

    I have applied the following styles to that span and do not see anything.
    Code:
    span.yaxis{
    	background-image:url("yaxis.gif");
    	max-width:54px;
    	max-height:240px;
    	position:absolute;
    	top:0;
    	bottom:0;
    	left:0;
    }
    I guess I will need to add z-indexes to the bar and the y-axis so as to get the y-axis on top of the bar.

    The test page is updated.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    Yes, that definitely achieves what I desire.

    I understand the padding and why overflow is hidden. What I don't understand is why background-position is set to display, apparently, nothing different. What I construe the background-position:0 100%; line to mean is that the image is displayed 100% from the top. I don't know what purpose that serves. I went ahead and combined that in to the shorthand.
    background-position:0 100% means that the bottom of the image is placed at the bottom of the element. If we used 0 0 then you would get the top of the image being placed at the top of the element so that when you shorten the height by removing the padding then the top is still at the top of that shortened element and you want the opposite effect.

    Also, I have the image inside the HTML. Why is it referenced in the CSS as well?
    CONFUSING!!! ...CSS really kicks me in the seat of the pants.
    You don't need an image in the html at all. You could have just a span as you are doing with the yaxis element. We just gave you what you asked for in the first post







    I have applied the following styles to that span and do not see anything.
    Code:
    span.yaxis{
    	background-image:url("yaxis.gif");
    	max-width:54px;
    	max-height:240px;
    	position:absolute;
    	top:0;
    	bottom:0;
    	left:0;
    }
    You have two logic errors in the above.

    1) You have set no stacking context for the absolutely placed span so it will get placed in relation parent that has a position defined other than static. If none exists it is placed from the viewport as its origin.

    Add position:relative to the parent div and then it will be placed correctly.

    2) It still won't show though because the element has no width or height and no content. You set a max-height and a max-width but as there is no actual content then they are zero. Just use width and height.

    Code:
    .graph div{
    position:relative;
    zoom:1.0;/* ie7 and under*/
    }
    span.yaxis{
    height:240px;
    width:54px;
    }

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yep! That gets it done.

    I thought having just the table set to relative positioning would be enough, but obviously not. Practice makes perfect? CSS is pretty tough for me.

    I'm going to start a new thread for the other problems I have related to this table.

    Thanks, Paul!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    Yep! That gets it done.

    I thought having just the table set to relative positioning would be enough

    Thanks, Paul!
    Table-cells cannot be positioned so those properties are ignored for table cells.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, Tyler,

    Well, here's the table with graphs that fulfills your wildest dream (so far) .

    Nested tables. I couldn't resist making this for you because I don't think you will appreciate the inflexibility of tables until you get your hands dirty. This one actually works fairly well, all things considered. You set the height of the colored bar using percent. Pretty easy.

    I included an extra graph just so you would have something to delete. It's pretty simple to do, but you must coordinate 3 items... the graph, its heading, and adjust the percent width of the graph cells. See comments in the HTML and CSS.

    The CSS has a bunch of comments.

    I think your idea about using horizontal graphs for mobile devices has more future than this vertical design.

    Have fun.

    You can download the code, images and some additional gradient images here:
    https://www.dropbox.com/sh/1af5b5241on6hqw/uP4rCzcdbS

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Quote Originally Posted by ronpat View Post
    Well, here's the table with graphs that fulfills your wildest dream (so far) .


    Yes, the table, though inflexible, does shrink and mold a bit in its cell sizes. There certainly is a lot to learn here about nested tables and how this is put together. I can see what you are saying about the horizontal graphs being better because those would be better fit to smaller viewports. I guess at a certain width I'm going to need to just hide the table completely (for now). I'll mess around with this a little bit more and see if I come up with a horizontal alternative.

    Do you have any ideas of what could be done inside a media query for when the viewport is about 500 px in width?

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    I'll mess around with this a little bit more and see if I come up with a horizontal alternative.
    Why do it the hard way? Horizontal graphs in ordinary css boxes are easy and very resizable. No media queries required .

    The code and images for the 100% fluid horizontal graphs can be downloaded here:
    https://www.dropbox.com/sh/fle2j2p81owi9ge/EjjjwwG7-m


    You might also give a look at one of Ralph's entries into the world of horizontal graphs. The different "look" might lead you to envision a new design.
    http://www.sitepoint.com/forums/show...-recreate-this
    http://pageaffairs.com/sp/1018689/


    I don't know what you want to do "inside the media query" - what you want to effect - so I don't want to hazard a guess.

    Edit: the following code uses a placeholder image.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <meta name="viewport" content="width=device-width">
        <title>horizontal graph 2b</title>
    <!--
    foreground-image: (scales to fit)
    Yes: Firefox, Chrome, Opera, IE8
    -->
        <style type="text/css">
    
    .outer {
        display:table;
        width:70%;
        border-left:2px solid #ccc;    /* specifiying border properties (esp. color) makes them cross-browser consistent... */
        border-top:2px solid #ccc;     /* the shading of border-style: inset, outset, groove, and ridge vary considerably between browsers */
        border-right:2px solid #999;
        border-bottom:2px solid #999;
        margin:0 auto;
    }
    .tcell {
        border-left:2px solid #999;
        border-top:2px solid #999;
        border-right:2px solid #ccc;
        border-bottom:2px solid #ccc;
    }
    img {
        width:100%;
        height:30px;
        vertical-align:top;
    }
    .overlay {
        height:30px;
        background-color:#fff;
        position:relative;    /* raises stacking context over img */
        margin-left:79%;    /* Set visible width of colored bar here */
        margin-top:-30px;
    }
    .xaxis {
        display:table;
        table-layout:fixed;
        width:100%;
        height:30px;
        position:relative;    /* raises stacking context over img */
        margin-top:-30px;
    }
    i {
        display:table-cell;
        width:10%;
        border-right:1px dotted #000;
        vertical-align:bottom;
        text-align:right;
        color:#000;
        font-style:italic;
        line-height:1;
        font-family:Calibri,sans-serif;
        padding-right:2px;
        margin:0;
    }
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="tcell">
            <img src="http://placehold.it/240x30" alt="">
            <div class="overlay"></div>
            <div class="xaxis">
                <i>1</i>
                <i>2</i>
                <i>3</i>
                <i>4</i>
                <i>5</i>
                <i>6</i>
                <i>7</i>
                <i>8</i>
                <i>9</i>
                <i>10</i>
            </div>
        </div>
    </div>
    
    </body>
    </html>
    Last edited by ronpat; Aug 5, 2013 at 13:08. Reason: Add example of code

  17. #17
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Weighing the Options

    That post with Ralph's re-creation of the horizontal graph is nifty. The idea I get from that is splitting up the categorical, qualitative data from the graphical, quantitative data. I really like the vertical version still, but it's not very flexible nor able to handle smaller devices/viewports.

    Well, I've attempted to plug that horizontal graph into the table on the landing page. I have done so improperly, and it does not display like the example on your uploaded file. Before any further figuring on how to get it to look right, it's worth to observe what the probable outcome will be. On the positive side, if the horizontal graph is plugged in the right way on the landing page, the table width will be much slimmer and able to adapt easily as the viewport becomes smaller. The trade-off there is that the graph will appear small, squished, and, overall, not very eye-catching.

    I'm thinking the best idea would be to just roll with the vertical graphs inside the nested tables and figure out what can be done to adapt to mobile devices, if anything (maybe just turn the display value to none for the table). It seems that the vertical idea will do just fine. I uploaded a second version with the vertical draft. The only thing it's not doing is floating right beside the image. That image needs to be sized down a bit, anyway. Hopefully that will get the table right beside it.

    Those are my thoughts for now. I'm going to have to get very good at styling tables as I have other ideas for new tables on different page categories.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •