Forum Moderators: not2easy
My website consists out of 7 divs with each a background image to form the design. My text comes in DIV 5 and this div stretches to contain the data.
Now I want to add a background image to the (centering) container of my site. But everything I've try doesn't seem to work. The image just won't show, neither in IE nor FF.
my CSS:
#wrap {
width: 1070px;
height:100%;
margin: 0 auto;
background:url(afbeeldingen/mbt-engineering_repeat_01.jpg);
background-repeat:repeat-y;
}
#apDiv1 {
background:url(afbeeldingen/mbt-engineering_01.jpg);
font-family:Arial;
font-size:12px;
width:1070px;
height:56px;
z-index:1;
}
#apDiv2 {
background:url(afbeeldingen/mbt-engineering_02.jpg);
width:1070px;
height:171px;
z-index:2;
}
#apDiv3 {
float:left;
background:url(afbeeldingen/mbt-engineering_03.jpg);
width:129px;
height:314px;
z-index:3;
}
#apDiv4 {
float:left;
background:url(afbeeldingen/mbt-engineering_04.jpg);
width:149px;
height:314px;
z-index:4;
}
#apDiv5 {
float:left;
text-align:left;
font-family:Arial;
font-size:12px;
overflow:visible;
background:url(afbeeldingen/mbt-engineering_05.jpg);
width:670px;
height:100%;
z-index:5;
visibility: visible;
}
#apDiv6 {
float:right;
background:url(afbeeldingen/mbt-engineering_06.jpg);
width:122px;
height:314px;
z-index:6;
}
#apDiv7 {
float:right;
left:0px;
top:0px;
background:url(afbeeldingen/mbt-engineering_07.jpg);
width:1070px;
height:173px;
z-index:7;
}
An example of the HTML code itself:
<!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>mbt-Engineering</title>
<link rel="shortcut icon" href="../afbeeldingen/favicon.ico" type="image/x-icon" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="../script/navbar.js" language="javascript" type="text/javascript"></script></head>
<body>
<div id="wrap">
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5">
<div align="center"><strong>TEXT</strong></div>
</div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
</div>
</body>
</html>
Thank you!
Regards
background: transparent url(afbeeldingen/mbt-engineering_01.jpg);
Welcome aboard!
1. Don't use uppercase in CSS - #apDiv = not best practice
2. I always enclose BG img URLs in single quotes: ie background:url('afbeeldingen/mbt-engineering_01.jpg'); - I don't know what issues not doing this can cause, but the W3 always use the quotes in examples.
3. The extra <div align="center"> is a possible culprit for your problem. Using align="center" for this purpose is not best practice anyway - <div style="text-align:center"> is more correct. I would remove this div and add a css rule "text-align:center" to the parent (div 5) and output the text straight into this div, and see if the problem still crops up.
4. Numbering the apdiv elements 1-7 will certainly be confusing in future if you come back to edit the code in a year or two, and if anyone else has to work on the code they will find it near impossible.
You should make that a class with styles that apply to all of them (font-family, padding or whatever they have in common) .apdiv and then give them all unique IDs too - eg #header, #rightbar, #content, #pics etc that describe what they do on the page. Believe me, while you are working on it right now it may not seem important, but if you come back to it after 6 months you will be grateful!
<div style="text-align:center"> is more correct.
Sorry to nit pick, this is not the equivalent of div align="center". This will center the text within it, but will not center the div on the page. What you want is <div style="margin:auto;"> - but the div will go full width unless you assign a width to it, so essentially without a width it has no effect.
