Web Hosting Forum | Lunarpages


*
Welcome, Guest. Please login or register.
Did you miss your activation email?



Login with username, password and session length
March 18, 2010, 12:42:16 AM

Pages: [1]   Go Down
  Print  
Author Topic: 2 background-images in css body tag?  (Read 1959 times)
Brennie369
Galactic Royalty
*****
Offline Offline

Posts: 201



WWW
« on: April 23, 2009, 06:21:41 PM »

Hi~ Is it possible to use 2 background images in my css body tag? Currently I have:

body {
   text-align:center;
   background-image:url(../images/bds_logo.jpg);
   background-repeat:no-repeat;
   background-position:top center;
   background-color:#000;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:.8em;
   color:#000;
}

But I'd like to utilize 2 images & have one aligned top left & the other top right. I've played with it a little bit without good results. Is this even possible? I'd rather not create a new div as my site is over 300 pages. I use Dreamweaver & it wouldn't be too difficult to do but I'd do it this way if I can.

Thanks!  Hiya
Logged
scanman20
Master Jedi
*****
Offline Offline

Posts: 1398



WWW
« Reply #1 on: April 23, 2009, 07:33:52 PM »

You'd have to give your body tag two classes and set a different image to each class, one for the left and one for the right.
Logged

Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
Brennie369
Galactic Royalty
*****
Offline Offline

Posts: 201



WWW
« Reply #2 on: April 23, 2009, 08:11:14 PM »

Ok how do I do that? May sound stupid but I've never done that before  Whoops
Logged
scanman20
Master Jedi
*****
Offline Offline

Posts: 1398



WWW
« Reply #3 on: April 27, 2009, 07:38:19 AM »

<body class="foo bar">

Then just make the CSS:
.foo{

}
.bar{

}
Logged

Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
Brennie369
Galactic Royalty
*****
Offline Offline

Posts: 201



WWW
« Reply #4 on: April 27, 2009, 07:55:55 AM »

Great, thank you!
Logged
Brennie369
Galactic Royalty
*****
Offline Offline

Posts: 201



WWW
« Reply #5 on: April 27, 2009, 09:58:34 AM »

I can't get this to work. It's only showing one of the images. Did I do something wrong?

<body class="logo slogan"> on the html page

And in the css:

.logo {
   background-image:url(../images/bds_logo_left.jpg);
   background-repeat:no-repeat;
   background-position:top left;
}
.slogan {
   background-image:url(../images/bds_logo_right.jpg);
   background-repeat:no-repeat;
   background-position:top right;
}
Logged
MrPhil
Professor in Nanotechnology
*****
Offline Offline

Posts: 4597



« Reply #6 on: April 27, 2009, 12:11:26 PM »

I don't think you can define more than one background image for a particular element. The last one processed would likely "win".

If you want two images in a fixed location relative to each other, you could use an image editor to glue the two images together into one. If you want the images to "float" apart as the window gets wider, you'd have to split your background into two div's and give each of them a background image and placement.

This is 300 pages of HTML code using DW? My condolences. Maybe this would be a good time to ponder going to a scripted language such as PHP or even SHTML so that you can have common background code in one included file. I don't know what DW will let you do... can you define your own page templates with the two div's -- and can you apply that to your already-created pages?
Logged

Brennie369
Galactic Royalty
*****
Offline Offline

Posts: 201



WWW
« Reply #7 on: April 27, 2009, 12:18:27 PM »

Hi Mr. Phil,

Yes I would want the images to float as the screen widens, so I guess I'd have to do the divs on the html pages. DW does have a Find & Replace feature that would work for this... I'd just select the code around where I want the divs & replace with same code & added divs. I just like to keep my html as clean as possible. SO, I'll rethink it. PHP would be great but it's not in my skillset!
Logged
scanman20
Master Jedi
*****
Offline Offline

Posts: 1398



WWW
« Reply #8 on: April 27, 2009, 01:32:48 PM »

Hmmmm, I could swear that I tested this over the weekend and it worked but I can't get a simple demo to do what I think I did. Note to self, slow down the drinking...
Logged

Even a broken clock is right twice a day.
NotOneBit.com
MCSE - MCSA - MCP
Pages: [1]   Go Up
  Print  
 
Jump to: