Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post

    Thumbs up I just learned how to put 2 bg images on a page

    If any of you have ever wanted to put two backgrounds in the BODY of a web page with CSS, but never could....

    I found a way to do it! It's easy now that I think about it.

    Just put some attributes to the HTML selector. Like this:
    Code:
    html {background:#8385c3 url(images/html_bg.png) repeat-y top left;}
    body {background: url(images/body_bg.png) no-repeat top right; }
    The image used for the body, will be on top of the image used for the html. So now you can have a gradient and 'tile' image.

    Just wanted to share what I just learned. Hope it helps some of y'all.

    dave

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    good tip
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    That is an interesting tip, but as far as I know only IE recognizes the "html" item in CSS. I don't think this would work cross-browser unless maybe you put it in the actual HTML code (but then I don't think it would validate). Hmmm...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Recently there was an interesting short article on this in Sitepoint's Tech Times Newsletter (#227), called "Styling the HTML and BODY Elements".

    http://www.sitepoint.com/newsletter/...27&format=html

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by Rowsdower! View Post
    That is an interesting tip, but as far as I know only IE recognizes the "html" item in CSS. I don't think this would work cross-browser unless maybe you put it in the actual HTML code (but then I don't think it would validate). Hmmm...
    No, this is cross-browser friendly. Here's a test page I put together recently for another poster, and the "dual background image" technique is how sites like this one (one of my favorites) create effects like the background fade to black at the top of the page.
    matt | design | blog

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by msuffern View Post
    No, this is cross-browser friendly. Here's a test page I put together recently for another poster, and the "dual background image" technique is how sites like this one (one of my favorites) create effects like the background fade to black at the top of the page.
    No kidding? Well you learn something new every day. Am I making up that bit about only IE using html in CSS or something? I'm totally lost now...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by Rowsdower! View Post
    Am I making up that bit about only IE using html in CSS or something?
    What do you mean? If you're referring to CSS calling an external image file like in the statement

    Code:
    background-image: url(images/body_bg.png);
    ...that's perfectly valid CSS.
    matt | design | blog

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by msuffern View Post
    What do you mean? If you're referring to CSS calling an external image file like in the statement

    Code:
    background-image: url(images/body_bg.png);
    ...that's perfectly valid CSS.
    No, actually I was thinking about things like this:
    Code:
    html>body #wrapper
    {
    <whatever>
    }
    I never ever use this method so I didn't have a keen grasp on what it was (just had a vague notion that it used "html" in the CSS). This is the root of my confusion.

    Thanks for helping me straighten that out though.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    My friends, here's a cool trick.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
    		<title>Image Demo</title>
    		<style type="text/css">
    		    
    		
    		    #imgwithBGimg {
    		        display: block;
    		        background: url('http://i40.tinypic.com/21c7blc.jpg') no-repeat bottom right;
    		        padding: 0px 0px 25px 0px;
    }
    		</style>
    	</head>
    <body>
                <img ID="imgwithBGimg" src="http://i43.tinypic.com/6nz1y1.jpg">
    </body>
    </html>

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by TinyScript View Post
    My friends, here's a cool trick.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
    		<title>Image Demo</title>
    		<style type="text/css">
    		    
    		
    		    #imgwithBGimg {
    		        display: block;
    		        background: url(http://i40.tinypic.com/21c7blc.jpg) no-repeat bottom right;
    		        padding: 0px 0px 28px 0px;
    }
    		</style>
    	</head>
    <body>
                <img ID="imgwithBGimg" src="http://i43.tinypic.com/6nz1y1.jpg">
    </body>
    </html>
    I'm not sure what's going on here... you've got an image that's padded out of it's own background image - what's the display:block; doing?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    the positioning doesn't work in IE. Sorry. Does anyone know the IE equivalent for padding? I simply never use IE so my skills with that suck.

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I'm not sure what's going on here... you've got an image that's padded out of it's own background image - what's the display:block; doing?

    Heh, it's not needed. It was someone else's example that I saved. I thought it was some interesting technique, but apparently I was mistaken. hahha.

    I thought it was intersting because you could use a transparent gif and then position the background image. It's not really anything special however. I admit that i have not dealt with padding before. I had to look up how it works after seeing that IE doesn't work

  • #13
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by Rowsdower! View Post
    No, actually I was thinking about things like this:
    Code:
    html>body #wrapper
    {
    <whatever>
    }
    Ah. Didn't see the OP reference that method so I wasn't sure what you were talking about.

    But... You made me do some research, so good on you.

    Found this page which describes how it's a "direct child" selector, but not supported by IE6, so in theory (haven't tested this), instead of having an IE6-only conditional stylesheet link cluttering up the head of our markup document, we could just make an IE6-only statement in our CSS, e.g.

    Code:
    .wrap {
      width:400px;
    }
    which every other browser would read except that we follow it up immediately with a statement prefixed with a "direct child" selector, which will supercede the previous statement for every browser except IE6:

    Code:
    html>body .wrap {
      width:420px;
    }
    Just some thoughts. Will try it out tonight.
    matt | design | blog

  • #14
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I've personally found CSS hacks a less elegant way of doing it. It just clutters up code which needn't be. It also increases file size marginally for standards-compliant browsers.


  •  

    Posting Permissions

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