PDA

View Full Version : 2 bg images in a div [solution provided]

Sergio
June 3rd, 2007, 06:35 PM
Does anyone know how to have two background images in a div?

Okay, so I have my content area with a repeating background image. However, I want another background image that is centered at the top (a header, basically).

I don't want to use <img src....etc.. for the header because part of the header blends in to the content.

Here are the two images I want to use to give you a better idea of what I want to do.
http://myeeoscodes.net/images/bgheader.gif
http://myeeoscodes.net/images/wrapper.gif
nsmchris
June 3rd, 2007, 06:38 PM
your site is down. Why not just use 2 divs?
rize
June 3rd, 2007, 06:50 PM
use css.. container and divs.. :)
Sergio
June 3rd, 2007, 06:50 PM
It's back up, you need to see the images to see why I can't use two divs.

edit: Found a solution, I'll just make the header image shorter I guess.
Greg-J
June 3rd, 2007, 09:29 PM
Here's a solution that will work much better than altering your design:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>In reference to: http://www.myspacepros.com/forum/showthread.php?t=6710</title>
<style type="text/css">
body{
margin:0;
padding:0;
background:#2c2c2c url(images/bg.gif) center top repeat-y}
#wrapper{
margin:0 auto;
padding:0 48px 0 56px;
width:950px;
min-height:439px;
height:auto !important;
height:439px;
background:url(images/wrapper.gif) 0 0 no-repeat}
#logo{
height:80px;
background:url(images/logo.bg.gif) 0 0 no-repeat}
#logo h1{
display:none}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>Put your SEO/page title here, or you can replace the h1 tags with span tags and put a generic sitewide title</h1>
</div>
<div id="content">
_CONTENT_
</div>
</div>
</body>
</html>



Here's a live example (http://greg-j.com/_/myspacepros~t_6710/)


The images are attached to the post
Sergio
June 3rd, 2007, 09:48 PM
Wow Greg, thanks a lot. I spent such a long time finding a solution and nothing worked. =P Now I need to study the code so I can actually learn something. Thanks again.
Greg-J
June 3rd, 2007, 09:55 PM
The short of it is that you're giving your body a tiling background and your #wrapper div your second background image. The height/min-height/height bit is to tell the browser to make the div at least tall enough to show the entire second background image. Blame the extra markup on IE 6 and below. You're giving the #logo div the height and background image of your logo and hiding the h1 tag within it.

Here's another example where the logo is a link displayed as a block level element using display:block and the span within it is hidden. This will make your logo a clickable link to your homepage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>In reference to: http://www.myspacepros.com/forum/showthread.php?t=6710</title>
<style type="text/css">
body{
margin:0;
padding:0;
background:#2c2c2c url(images/bg.gif) center top repeat-y}
#wrapper{
margin:0 auto;
padding:0 48px 0 56px;
width:950px;
min-height:439px;
height:auto !important;
height:439px;
background:url(images/wrapper.gif) 0 0 no-repeat}
#logo a{
display:block;
height:80px;
width:415px;
background:url(images/logo.bg.gif) 0 0 no-repeat}
#logo a span{
display:none}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href=""><span>home</span></a>
</div>
<div id="content">
_CONTENT_
</div>
</div>
</body>
</html>


The live example (http://greg-j.com/_/myspacepros~t_6710/) has been updated to reflect this change as well.
Sergio
June 3rd, 2007, 10:00 PM
Nice, even better. I wasn't sure if that was possible. :D Thanks Greg.
Greg-J
June 3rd, 2007, 10:10 PM
Nice, even better. I wasn't sure if that was possible. :D Thanks Greg.
My intentions weren't entirely altruistic - I want that wii (http://www.myspacepros.com/forum/showthread.php?t=6371)! ;)


I only kid. I can't win it :P
Sergio
June 3rd, 2007, 10:19 PM
Plus, you already have one right? It wouldn't hurt to have two hah. ;)