SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Text background

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text background

    I see on many sites a text background on top of the page background to help the text stand out. I'd like to add this to my page and am curious to what is the best way to implement this.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Am not certain of exactly what you are asking here w/o an example.

    However , I will point out you can ADD a BG to almost any HTML element ( behavior will vary) using CSS. For example:

    Adding a color bg:
    Code:
    h1{padding:10px; background: pink;}
    <h1> headline</h1>
    Using an image:
    Code:
    p{padding:10px; background:url(your_pic.jpg);}
    <p>more sample text</p>
    You can even control the repeat and position:
    Code:
    div{padding:10px; background:url(your_pic.jpg) 0 2em repeat-x;} /* the first # is horizontal offset, the second is the vertical.
    <div>more sample text</div>
    div{padding:10px; background:url(your_pic.jpg) 3em 0 repeat-y;} /* the first # is horizontal offset, the second is the vertical.
    <div>more sample text</div>
    as you can see you have quite a range of options to mix and match
    Code:
    div{padding:10px;  width: 500px; height:500px; background:url(your_pic.jpg) 100px 50px no-repeat pink;}
    <div>more sample text</div>
    Last edited by ralph.m; Jun 26, 2012 at 02:34. Reason: added closing code tag

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

    If you are talking about a transparent background behind the text to make it stand out a bit more you can do this for modern brower4s (ie9+) using rgba as follows:

    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">
    <title>Untitled Document</title>
    <style type="text/css">
    body { background:red }
    .textbg {
    	padding:10px;
    	margin:50px auto;
    	width:500px;
    	background: rgba(255, 255, 255, 0.4);
    }
    </style>
    </head>
    
    <body>
    <div class="textbg">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate risus ut magna blandit vehicula. Proin condimentum sodales purus. Donec tincidunt magna quis odio gravida consectetur. Quisque ante nibh, accumsan ac porta non, viverra congue turpis. Quisque non leo at massa tempus blandit. Nullam viverra varius posuere. Fusce at tortor non quam aliquet feugiat. Pellentesque mattis orci id felis fermentum sodales. Sed scelerisque rhoncus justo sed malesuada. Morbi bibendum, tellus quis volutpat fringilla, mi libero pretium leo, in interdum purus metus ac felis. </p>
    </div>
    </body>
    </html>
    For older browsers you may want to default to a solid colour or use a background transparent png rather than opacity because opacity will fade the text also.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can all this code go into the html?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    Can all this code go into the html?
    Yes. See Paul's example above. BUT ... it's better to put the CSS part into your external style sheet, so that it can be used on multiple pages.
    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."

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    by background transparent png, does that mean create the background as an image and put that behind the text?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    by background transparent png, does that mean create the background as an image and put that behind the text?
    Yes. You can create a .png image that is semi transparent. If you apply that as a background image to the text container, it will create a nice background effect, while still allowing what's behind it to show through.

    There days, I prefer to use the rgb method, but if you must support older browsers, an image is a viable alternative. There are also some JavaScript scripts that force older browsers to play ball, but that's probably going overboard. I prefer to let users of older browsers get a lesser experience.
    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."

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So how exactly do i apply an images as a background for the text?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    So how exactly do i apply an images as a background for the text?
    Remember, you are applying the image as a background to the text's container, not to the text.

    Code:
    <div class="textbg">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate risus ut magna blandit vehicula. Proin condimentum sodales purus. Donec tincidunt magna quis odio gravida consectetur. Quisque ante nibh, accumsan ac porta non, viverra congue turpis. Quisque non leo at massa tempus blandit. Nullam viverra varius posuere. Fusce at tortor non quam aliquet feugiat. Pellentesque mattis orci id felis fermentum sodales. Sed scelerisque rhoncus justo sed malesuada. Morbi bibendum, tellus quis volutpat fringilla, mi libero pretium leo, in interdum purus metus ac felis. </p>
    </div>
    Code:
    .textbg {background: url(bgimage.png);}
    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."

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Is as I said in my original response, you apply it to the element.
    for example:

    if you anted every P to have an single image of a bunny at the bottom left:

    p{ background: url(bunny.jpg) no-repeat left bottom;}

    if you wanted the same but in the of an unordered list

    ul{ background: url(bunny.jpg) no-repeat left bottom;}

    and so forth.

    so your answer is/ are : background: and/or background-image image property, as described above.

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I put the code it wrong somewhere because it isn't showing up.

    I put this code in the css
    Code:
    .textbg {
    	padding:10px;
    	margin: 50px auto;
    	background: url(textbg1.png);
    	}
    and in the html i put <div class="textbg"> before the text

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's probably this bit that is wrong:

    Code:
    background: url(textbg1.png);
    You have to tell the CSS file exactly where the image is. For example, if it's in an /images/ folder inside your root folder, the path should be

    Code:
    background: url(/images/textbg1.png);
    Where is the image stored in your site? (Don't just tell us the folder name. We also need to know where the folder is in relation to your root folder.)
    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."

  13. #13
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup that did it! Thank you

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    yup that did it! Thank you
    Great! Glad it's worked out well.
    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."


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
  •