SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member DaMarkov's Avatar
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to start a background image after the text ends

    I'm looking for a CSS solution that would enable me to start showing a background image after the (title) text ends.

    So that it would look like this:


    So first title, followed by a background image that would start after the title text ends and runs all the way to the end of the line. The title length would change depending on the number of characters it contains.

    Is there anyway this can be done using a single class element? I tried it using the sample on Verlee's blog but it doesn't quite work as I want it.

    Any help would be greatly appreciated.

  2. #2
    SitePoint Enthusiast alexson's Avatar
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I don't think you'll be able to given that the text is variable width.

    If you wrapped the title in a div with a background image as you want, then gave the title a background colour of white that would stop the image going behind the text.

    It's not as neat as I'd like, I'd be interested to know if there is a way of doing it...

    Alex

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

    Welcome to Sitepoint

    For IE8 plus you could do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        height:25px;
        overflow:hidden;
        position:relative;
    }
    p:after {
        background:red;/* apply your image here */
        content:" ";
        position:absolute;
        width:999em;
        height:25px;
        margin:0 0 0 5px;
    }
    </style>
    </head>
    <body>
    <p>This is the text </p>
    </body>
    </html>
    Otherwise you would need an extra inner element to either rub out or supply the background

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    The above works well in IE8+ but I don't really see a solution for ie7 and under without adding an extra element.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        height:25px;
        overflow:hidden;
        position:relative;
    }
    p span {
        background:red;/* apply your image here */
        position:absolute;
        width:999em;
        height:25px;
        margin:0 0 0 5px;
    }
    </style>
    </head>
    <body>
    <p>This is the text <span></span></p>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are willing to give overflow:hidden on the parent, I think that itcan be done in IE<8.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bla bla</title>
    <style>
    h1 {
        display:list-item;
        list-style-position:inside;
        list-style-image:url(bg.png);
        direction:rtl;
        text-align:left;
        white-space:nowrap;
    }
    </style>
    </head>
    <body>
    <h1>Bla bla</h1>
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zoom:1 View Post
    If you are willing to give overflow:hidden on the parent, I think that itcan be done in IE<8.
    Good thinking

    Yes that should work in IE6 and 7 with some caveats but needs to be hidden form other browsers otherwise you will lose the text if the image is too wide.

    However it is clever thinking on your part and indeed back in 2006 we had a css quiz where the solution was similar (the second example in that post).

    We could roll your example and mine together to produce a cross browser solution:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        height:25px;
        overflow:hidden;
        position:relative;
        text-align:left;
    }
    p:after {
        background:red;/* apply your image here */
        content:" ";
        position:absolute;
        width:999em;
        height:25px;
        margin:0 0 0 5px;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    p{
        display:list-item;
        list-style-position:inside;
        list-style-image:url(images/img.jpg);/* same image goes here */
        direction:rtl;
        white-space:nowrap;
            height:auto;
            overflow:visible;
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <p>This is the text </p>
    </body>
    </html>
    The caveats I mentioned that for this to work in IE<8 then the element must not have a layout which rules out dimensions and overlow and float etc. There is also the problem that you can't really fine tune the background position as you can with the background property but it may be good enough in some cases.

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We could roll your example and mine together to produce a cross browser solution:
    It is good to show that it is possible, but my solution is not that ideal, because I can't use sprites, unless I'm wrong.

    As this decoration iss not that essential, I'd rather use css expressions for IE<8 and your code.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bla bla</title>
    <style>
    h1 {
        overflow:hidden;
        position:relative;
        ruby-align: expression(
            this.runtimeStyle.rubyAlign = "auto",
            this.insertAdjacentHTML("beforeEnd","<b></b>")
        );
        width:100%;
    }
    h1 b, h1:after {
        background-image:url(bg.png);
        content:" ";
        position:absolute;
        width:100%;
        zoom:1;
    }
    </style>
    </head>
    <body>
    <h1>Bla bla</h1>
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zoom:1 View Post
    It is good to show that it is possible, but my solution is not that ideal, because I can't use sprites, unless I'm wrong.

    As this decoration iss not that essential, I'd rather use css expressions for IE<8 and your code.
    That's another interesting solution. I'm not usually keen on using expressions due to their performance overheads but it keeps the code quite tidy in your example.

    You'll need a height on the absolute element and perhaps a small margin to give the text breathing space and I think we are done

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bla bla</title>
    <style>
    h1 {
        overflow:hidden;
        position:relative;
        ruby-align: expression(
            this.runtimeStyle.rubyAlign = "auto",
            this.insertAdjacentHTML("beforeEnd","<b></b>")
        );
        width:100%;
    }
    h1 b, h1:after {
        background:red;/* image goes here*/
        content:" ";
        position:absolute;
        width:100%;
        zoom:1;
            height:100%;
            margin:0 0 0 5px;
    }
    </style>
    </head>
    <body>
    <h1>Bla bla</h1>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not usually keen on using expressions due to their performance overheads but it keeps the code quite tidy in your example.
    I think that it is not quite true, because this expression overwrites itself and therefore is executed only once.

    CSS expressions are the perfect tool to bring pseudo classes support or attach events in IE<8, if thay overwrite themselves.

    On the other hand css expressions for min-width or position:fixed are not performant, because, by definition, they can't be overwritten.

    You'll need a height on the absolute element and perhaps a small margin to give the text breathing space and I think we are done
    Yes, you are right, ups.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zoom:1 View Post
    I think that it is not quite true, because this expression overwrites itself and therefore is executed only once.

    CSS expressions are the perfect tool to bring pseudo classes support or attach events in IE<8, if thay overwrite themselves.
    Ah yes of course - I wasn't paying attention

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I use a slightly different approach.... Much like Paul's SPAN demo, but I use inline-block and a negative margin. I like to avoid APO when I can.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	image after text demo
    </title>
    <style type="text/css">
    p {
    	overflow:hidden;
    	height:25px;
    }
    
    p span {
    	display:inline-block;
    	width:999em;
    	height:25px;
    	margin-right:-999em;
    	vertical-align:middle;
    	background:red;/* apply your image here */
    }
    </style>
    
    </head><body>
    
    <p>This is the text <span></span></p>
    
    </body></html>

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just tossed together an expression version. I prefer to use zoom, since that's also a haslayout trigger and if we're gonna use CSS to add the element, we might as well give it a class so you can go ahead and use other spans or b inside the tag in question. Oh, and you do NOT need to state "this" inside expressions, it is assumed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	image after text demo
    </title>
    <style type="text/css">
    p {
    	overflow:hidden;
    	height:25px;
    	zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);
    }
    
    p .after,
    p:after {
    	content:" ";
    	display:inline-block;
    	width:999em;
    	height:25px;
    	margin:0 -999em 0 0.4em;
    	vertical-align:middle;
    	background:red;/* apply your image here */
    }
    </style>
    
    </head><body>
    
    <p>This is the text</p>
    
    </body></html>
    Look Ma, no Apo.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Nice one Jason

    I shall now delete this thread and save it for a quiz (Just joking)

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Nice one Jason
    Yes, that is slick!

    It reminds me of that little script Tommy wrote for ≤ IE7 in this counter reset thread.
    Restart and ordered list - post#19

    That has all kinds of possibilities for keeping the html clean when needing to support legacy IE. I could have used something like that to eliminate the empty elements I used in a recent example.

    I would worry about JS being turned off for IE6/7 users either. Those folks won't being getting very far on the web without it.

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I would worry about JS being turned off for IE6/7 users either. Those folks won't being getting very far on the web without it.
    Thing is, that's worst case scenario; IE 6/7 without javascript enabled -- what's the damage? Oh noes, they don't get an extra presentational image... Is the functionality/usability of the page going to be hampered by this?

    I think not. I may end up using this same technique for all my image replacements from now on -- if just IE7 and lower user with scripting disabled will get the plaintext instead of the image... Big honking deal.

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    what's the damage? Oh noes, they don't get an extra presentational image
    Whoops, that was a typo in my last post. I meant to say "I wouldn't worry about..."

    Yeah I was thinking the same thing too when I was thinking about JS off, big deal if IE<8 doesn't get a bg image. They still get a working page.

    This is the recent example I was talking about that it would work well in. Once again, if JS is off IE<8 just wouldn't get v-a:middle text. Not a deal breaker as the page would still be functional.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post

    I may end up using this same technique for all my image replacements from now on -- if just IE7 and lower user with scripting disabled will get the plaintext instead of the image... Big honking deal.
    That's a good idea and will do away with the extra elements in the html for those image replacement techniques.

    Quote Originally Posted by Ray
    Whoops, that was a typo in my last post
    lol - Yes I thought you had made a typo there

  18. #18
    SitePoint Member DaMarkov's Avatar
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great ideas. Thanks guys!

  19. #19
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could have used something like that to eliminate the empty elements I used in a recent example.

  20. #20
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here's another variation:

    Code HTML4Strict:
    <style>
    h1 {
    height:20px;
    background:url(path goes here);
    position:relative;
    }
     
    h1 span {
    position:absolute;
    top:0;
    left:0;
    line-height:20px;
    background:white;
    }
     
    </style>
     
    <h1><span>Page Title</span></h1>

    The problem with this approach (and the others above) is that it fails on multi-line headings. The solution uses slightly more markup. The assumption is that the background image is matched end to end vertically.


    Code HTML4Strict:
    <style>
    h1 {
    background:url(path goes here);
    }
     
    h1 strong {
    float:left;
    background:white;
    padding-right:5px;
    }
     
    h1 span {
    clear:both;
    height:1px;
    line-height:1px;
    background:white;
    }
     
    </style>
     
    <h1><strong>Page Title</strong><span></span></h1>

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by eruna View Post
    Here's another variation:
    Good try but that isn't working as required

    The background image needs to start after the text and not simply be rubbed out by it. The image starting point should be where the text ends.

    The problem with this approach (and the others above) is that it fails on multi-line headings.
    No our examples work fine on multi lines just by using line-height in stead of height. The image always starts after the text stops.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
        xmlns="http://www.w3.org/1999/xhtml"
        lang="en"
        xml:lang="en"
    ><head>
    
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    
    <meta
        http-equiv="Content-Language"
        content="en"
    />
    
    <title>
        image after text demo
    </title>
    <style type="text/css">
    p {
        overflow:hidden;
        line-height:25px;
        zoom:expression(
            runtimeStyle.zoom=1,
            insertAdjacentHTML('beforeEnd','<span class="after"></span>')
        );
    }
    
    p .after,
    p:after {
        content:" ";
        display:inline-block;
        width:999em;
        height:25px;
        margin:0 -999em 0 0.4em;
        vertical-align:middle;
        background:red;/* apply your image here */
    }
    </style>
    
    </head><body>
    
    <p>This is the text This is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the text</p>
    
    </body></html>
    Last edited by Paul O'B; Jul 12, 2011 at 01:29.

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The background image needs to start after the text and not simply be rubbed out by it. The image starting point should be where the text ends.
    Aye, needs to slide over with the text width -- at least that's how I interpreted OP's question. At first I thought the same solution as eruna -- but I always read posts twice because it's easy to miss small details like that.

  23. #23
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My mistake I'll have to read it closer next time.


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
  •