Dreamweaver background image help

dmartinminn · Aug 16, 2013

Hello everyone.

I'm a graphic design student at a community college currently taking a web design 101 course.

I'm having some trouble with getting my background image to display the way I'd like it to and was wondering if anyone could help.

I've previewed the page in three different browsers and it's off in each one.

The problem is the background image is just supposed to appear in the body section but instead it appears behind my header and navigation.

The image was created so it looks like two graphics on either side of the page with a black background in the center for text.

Finally the page was created with a template using Dreamweaver (was a requirement for the assignment).

Here's a graphic of what the design should look like:
http://i475.photobucket.com/albums/rr120/mondo_trasho/website-graph.jpg

But instead it looks like this:
http://i475.photobucket.com/albums/rr120/mondo_trasho/website-graph2.jpg

Any ideas or solutions would be greatly appreciated. Thanks.

d a v e · Aug 16, 2013

how can we tell from an image? post the code or an example on line and i'm sure we can help

Phreaddee · Aug 16, 2013

if the background is on the <body>
and within the <body> is <header> and <nav>
then it is displaying as it should.
if you want it to display after the header and nav then you'll need to compensate and positioning it accordingly.

d a v e · Aug 16, 2013

in lieu of any code... try this in your css

background-position: center ;

or are you trying to achieve a certain height??

dmartinminn · Aug 16, 2013

Whoops. Yeah that would probably help.

Code:

#container
header {
	text-align: center;
	background-color: #000002;
	vertical-align: top;
	margin-right: auto;
	margin-left: auto;
}
#container {
	width: 960px;
	margin: 0 auto;
}

#text {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	margin-right: auto;
	margin-left: auto;
	height: 535px;
	width: 650px;
	margin-top: 50px;
	background-color: none;
	text-align: center;
}
nav {
	font-family:"Copasetic NF";
	font-size:24px;
	color:#DDCFB2 }
nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
nav ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;	
}
nav ul li a:link, nav ul li a:visited {
	display: block;
	height: 40px;
	width: 160px;
	line-height: 40px;
	text-align: center;	
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
}
section {
	width: 960px;
	background-color: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
}
body {
	background-image: url(images/Kit-Kat-Club-edit.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #060A07;
	margin: auto;
}

h1, h2 {
	color: #FFF;
	text-align: center;
}
footer {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	color: #FFF;
	text-align: center;
	background-color: #060a07;
}

d a v e · Aug 16, 2013

and the html? and the images? and.. ok you get the picture

and is it the height that's not right or the image placement that's not ok??

dmartinminn · Aug 16, 2013

It's the placement.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>CABARET | The New Musical Motion Picture</title>



<link href="../styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('../images/home-hover.jpg','../images/cast-hover.jpg','../images/pictures-hover.jpg','../images/soundtrack-hover.jpg','../images/interview-hover.jpg','../images/links-hover.jpg')">
<div id="container">
<header><img src="../images/header.jpg" width="940" height="266" alt="cabaret logo"></header>
<nav>
<ul>
<li><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../images/home-hover.jpg',1)"><img src="../images/home.jpg" alt="home" width="160" height="40" id="home"></a></li>
<li><a href="../cast.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cast','','../images/cast-hover.jpg',1)"><img src="../images/cast.jpg" alt="cast" width="160" height="40" id="cast"></a></li>
<li><a href="../pictures.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pictures','','../images/pictures-hover.jpg',1)"><img src="../images/pictures.jpg" alt="pictures" width="160" height="40" id="pictures"></a></li>
<li><a href="../soundtrack.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soundtrack','','../images/soundtrack-hover.jpg',1)"><img src="../images/soundtrack.jpg" alt="soundtrack" width="160" height="40" id="soundtrack"></a></li>
<li><a href="../interview.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('interview','','../images/interview-hover.jpg',1)"><img src="../images/interview.jpg" alt="interview" width="160" height="40" id="interview"></a></li>
<li><a href="../links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','../images/links-hover.jpg',1)"><img src="../images/links.jpg" alt="links" width="160" height="40" id="links"></a></li>
</ul>
</nav>
<section>
<div id="text"></div>
</section>
<footer>Daniel Martin-Minnich © 2013</footer>
</div>
</body>
</html>

And here's the image:
http://i475.photobucket.com/albums/rr120/mondo_trasho/Kit-Kat-Club-edit.jpg

Apokalupsis · Aug 17, 2013

Here's a solution (there may be more than 1) with the theory and best practice to explain what is happening and how to prevent it.

------------------------------------------------

I can understand the confusion. It is with the "body." You have to keep in mind that the "body" element contains everything (header, navigation, side boxes, text, footer, etc...).

So in your image, to simply name the inner most box "body" while you give the body element certain attributes may be a part of the confusion if you are thinking in the terms of the graphic. While it may seem like you are selecting that inner most part of the page (as per your image), you are really selecting the entire page itself (not a section of it).

You do not need to make the entire document have a background image, so there is no need to give the body element a bg image. Instead, think of every part of the page as a block...and each of these blocks are all inside the body of the web page.

The background should go into an middle block (or midblock div, or whatever you want to call it) which is between the header/nav and the footer. The content (what you labeled 'body") is inside this middle block (mid_inside). If we were to wireframe it, we'd have 6 divs:

master (contains all other divs)
header
nav
midblock (the section containing the bg + inner content)
mid_inside (the content in between the sides of the bg image)
footer

It's best practice IMO (as a designer anyway) to start with a wireframe (skeletal outline, foundation) of the site before adding in all the other content. Your images are precisely that...but it ought to be coded first (I imagine that is what the blank template would be in DW?).

I've reproduced the result you want but I don't use DW much so this is more of a raw skeleton w/o all that js confusion. I hand code (atm), and here is that wireframe: http://jsfiddle.net/Apokalupsis/c8Fr2/

Here's a screenshot:

** EDIT** I don't know why the ss is so small. It is unclickable and reduced in size. I hope you can see it ok. If not, I'll link to it.

Apokalupsis · Aug 18, 2013

I wanted to see if I could make it a little more "semi-responsive" (it isn't true responsive design as this is just a quick little wire-frame focusing on how to do the bg image after all). Check out this better way to do it (with slight modifications from above): http://jsfiddle.net/Apokalupsis/k8nUB/2/embedded/result/

I'm sure someone could improve upon even that though, there's always someone more clever out there. lol

dmartinminn · Aug 24, 2013

Thank you Apokalupsis! I got it to work. Here's the end result if anyone's curious. Unfortunately we had a 200K page size limit so my images look kind of crappy but oh well.

http://hcc2-webhead.net/hccdmminnich/

Dreamweaver background image help

dmartinminn

New Member

d a v e

New Member

Phreaddee

Super Moderator

d a v e

New Member

dmartinminn

New Member

d a v e

New Member

dmartinminn

New Member

Apokalupsis

New Member

Attachments

Apokalupsis

New Member

dmartinminn

New Member