CSS Forum

**silverglade** · 12-08-2008, 08:18 AM

hi, i dont know how to put content or images over my background slice divs
i want to put my background image slices from photoshop into divs, then add my content over that with divs, but i dont know how to do it. any help greatly appreciated. thanks. derek

**wayfarer07** · 12-08-2008, 09:48 AM

http://www.webmaster-talk.com/css-fo...age-image.html

**silverglade** · 01:10 PM

great thanks very much. derek also, is it possible to have more than one background image placed?

**wayfarer07** · 12-08-2008, 01:19 PM

Multiple backgrounds are a part of CSS3, but are only currently supported by Safari and Chrome (I believe Firefox 3.1 is also going to support this). For now, you have to nest elements inside of each other, and place a background on each one, or else position elements next to each other.

**silverglade** · 12-08-2008, 01:29 PM

thank you. i was told that if i have a large background image, i am to slice it into pieces for my web page. but if i do that, and they are all in divs, i dont know how to place text or images over the slices. would i use absolute divs? sorry for all the questions. derek

**LadynRed** · 12-08-2008, 02:32 PM

Quote:

would i use absolute divs?

No. You put your image 'slice' in as a background to a div, then you can put whatever text you like inside the div.

This might help you: www.cssslicingguide.com

**silverglade** · 12-08-2008, 03:55 PM

awesome thank you

**silverglade** · 12-08-2008, 05:09 PM

hi, im having problems getting the div background image to show up. here is my code . any help greatly appreciated. derek

Code:

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">

body {
margin: 0; padding: 0;
text-align: center; 
}

#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}

#bg {
 background-image:url('images\template_14.gif'); 
background-repeat:no-repeat; 

    
}
</head>
<body>
<div id="container">
<div id="bg"> </div>
</div> 
</body>
</html>

**serandfae** · 12-08-2008, 07:19 PM

Specify a width and height for #bg in the CSS.

tim

**silverglade** · 12-09-2008, 06:39 AM

thank you, it was that and i was missing a </style> tag. lol. thank you. derek

**silverglade** · 07:22 AM

hi, i made a div image background and made the div the same size as the image, but its showing up larger in dreamweaver for some reason. anyway, i was wondering what i have to do to put text directly over my div image background? as it is, the text goes off to the right and top of the image. i would also like to fix the div size to fit the image. i already specified the size and its not shrinking to the image in dreamweaver nor in browser.. any help greatly appreciated. derek. here is the code. its just one "bg" div with a background.

Code:

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center; 
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
 background-image:url('template_14.gif'); 
background-repeat:no-repeat; 
width: 177px;
height: 172px;
 
}
</style>
</head>
<body>
<div id="container">
<div id="bg"> </div>
</div> 
</body>
</html>

**chrishirst** · 12-09-2008, 09:55 AM

merged three threads on same topic

**silverglade** · 12:55 PM

i dont know how to accurately place text over my background div, and the div box wont tightly wrap around the image even when i specify the same dimensions as the image. the text floats outside of the image, and the div is too large for the image. any help greatly appreciated. here is the code. thanks. derek

Code:

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center; 
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
 background-image:url('template_14.gif'); 
background-repeat:no-repeat; 
width: 177px;
height: 172px;
 
}
</style>
</head>
<body>
<div id="container">
<div id="bg"> </div>
</div> 
</body>
</html>

is this the only way to do it?

Code:

<!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=iso-8859-1" />
<title>CSS Slicing Guide </title>
<style type="text/css">
body {
margin: 0; padding: 0;
text-align: center; 
}
#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}
#bg {
 background-image:url('template_14.gif'); 
background-repeat:no-repeat; 
width: 177px;
height: 172px;
   
}
div#testtext {
 position: relative;
 height: auto;
 width: 150px;
 left: 25px;
 top: 25px;
}
</style>
</head>
<body>
<div id="container">
<div id="bg"><div id="test"><div id="testtext">Superimposed Text</div>
</div>

 </div>
</div> 
</body>
</html>

**LadynRed** · 08:06 PM

Zero out the margins and padding on #bg for one thing, otherwise you get the defaults.

You don't NEED a div just for the text, just put your text in proper paragraphs INSIDE the #test div. Don't over complicate things for yourself

You also do NOT need the relative positioning, totally unnecessary. Specify margins and padding on the <p> that you're going to put your text in.

**silverglade** · 12-09-2008, 04:05 PM

ok thank you very much! derek i was overcomplicating it. thank you.

**LadynRed** · 12-09-2008, 08:07 PM

Simple is better in most cases

If you use the normal document flow to your advantage, you will only need positioning for a few specific instances depending on your layout.

**silverglade** · 09:17 AM

thank you im making progress thanks to the replies. now i have a series of divs with background images. and i dont know how to put my navigation divs below that , or if i use a separate div for each navigation image slice. here is the page so you can get an idea.

http://derekvanderven.com/new_doctor_site/home.html

and here is the code please critique it if you can or offer suggestions. thanks derek.

Code:

<!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>dr alexander home</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;
<!-- zeroing out for browsers -->
;   background-color: #5475AB;
}
#wrapper {
  position: relative;
  width: 800px;
  height: 700px;
  margin-right: auto;
  margin-left: auto;
  border-right: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  }
  #home{
 
   float:left;
 
  background-image:url('1.jpg'); 
  background-repeat:no-repeat; 
   width: 389px;
   height: 560px;
  padding: 0px;
  align: "left";
  }
 
   #slicetwo{
  float:left;
 
  background-image:url('2.jpg'); 
   background-repeat:no-repeat; 
  width: 411px;
  height: 131px;
   padding: 0px;
   align: "left";
   }
    #slicethree{
 float: left;  
 width: 411px; 
 height: 183px;
 background-image:url('3.jpg'); 
    background-repeat:no-repeat;
    padding: 0px; 
 align: "left";
 }
 #slicefour{
 float: left;  
 width: 411px; 
 height: 160px;
 background-image:url('4.jpg'); 
    background-repeat:no-repeat;
    padding: 0px; 
 align: "left";
 }
 #slicefive{
 float: left;  
 width: 411px; 
 height: 86px;
 background-image:url('5.jpg'); 
    background-repeat:no-repeat;
    padding: 0px; 
 align: "left";
 }
 
  </style>
 
 
</head><body> 
<div id="wrapper">
<div id="home"></div> 
<div id="slicetwo"></div>
<div id="slicethree"></div>
<div id="slicefour"></div>
<div id="slicefive"></div>
</div>
</body>
</html>

**LadynRed** · 12-10-2008, 09:56 AM

Ok, let me clue you in here. You are still thinking in tables mode the way you're slicing graphics and laying things out. You're still going about this the hard way

Take that ENTIRE graphic - not the slices of it - and make IT the background for #wrapper. I would remove the caduceus and his name from the background and use the caduceus as a background for a transparent div and put his name in as a proper header tag - NOT a graphic - SE's can't read graphics.

From there, you can add the divs for your content as needed ON TOP of the graphic background. I have over 200 physician practice web sites on-line - I've done these a few times

**silverglade** · 12-10-2008, 10:20 AM

thank you so much ladynred. you are awesome. thanks. derek

**silverglade** · 12-10-2008, 10:53 AM

do i have to make a div for the doctor header text? i already made my new background and caduceus in a transparent div. any help appreciated thanks again. derek