...

View Full Version : I just learned how to put 2 bg images on a page



RedMatrix
03-07-2009, 11:37 AM
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:

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

PitbullMean
03-07-2009, 06:17 PM
good tip

Rowsdower!
03-07-2009, 08:33 PM
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...

auslin
03-07-2009, 09:57 PM
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/viewissue.php?id=3&issue=227&format=html

BoldUlysses
03-07-2009, 10:05 PM
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 (http://www.sufferndesign.com/helping/page6.html) I put together recently for another poster (http://www.codingforums.com/showthread.php?t=159226), and the "dual background image" technique is how sites like this one (http://www.overtherhine.com/) (one of my favorites) create effects like the background fade to black at the top of the page.

Rowsdower!
03-07-2009, 11:00 PM
No, this is cross-browser friendly. Here's a test page (http://www.sufferndesign.com/helping/page6.html) I put together recently for another poster (http://www.codingforums.com/showthread.php?t=159226), and the "dual background image" technique is how sites like this one (http://www.overtherhine.com/) (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...

BoldUlysses
03-07-2009, 11:35 PM
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


background-image: url(images/body_bg.png);

...that's perfectly valid CSS (http://www.w3schools.com/css/pr_background-image.asp).

Rowsdower!
03-08-2009, 12:01 AM
What do you mean? If you're referring to CSS calling an external image file like in the statement


background-image: url(images/body_bg.png);

...that's perfectly valid CSS (http://www.w3schools.com/css/pr_background-image.asp).

No, actually I was thinking about things like this:
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. :thumbsup:

TinyScript
03-08-2009, 12:24 AM
My friends, here's a cool trick.


<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>

Excavator
03-08-2009, 12:47 AM
My friends, here's a cool trick.


<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?

TinyScript
03-08-2009, 12:52 AM
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.

TinyScript
03-08-2009, 12:57 AM
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

BoldUlysses
03-08-2009, 03:47 AM
No, actually I was thinking about things like this:
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. :thumbsup:

Found this page (http://www.positioniseverything.net/articles/ie7-dehacker.html) 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.


.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:


html>body .wrap {
width:420px;
}

Just some thoughts. Will try it out tonight.

Apostropartheid
03-08-2009, 09:41 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum