Background Images

March 31, 201016 yr

Hi there, I am a bit stuck, at the moment I am creating a film production website, however I am using a template and I would like the background of several pages to be different than the background of my index page. At the moment I have currently put one background image on the index page, but now I want to add different background images to the rest of the pages. How do I accomplish this using HTML and CSS? Below are both the HTML and CSS code from my dreamweaver program, can anybody show me what I need to add on each of my html pages, for example my index, founders page etc and what else I need to add to my main CSS.

Sorry if this is a silly question, I'm new to this staff!

(HTML CODE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Art Of Life Films</title>

<!--

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_nbGroup(event, grpName) { //v6.0

var i,img,nbArr,args=MM_nbGroup.arguments;

if (event == "init" && args.length> 2) {

if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

nbArr[nbArr.length] = img;

for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = img.MM_dn = args[i+1];

nbArr[nbArr.length] = img;

} }

} else if (event == "over") {

document.MM_nbOver = nbArr = new Array();

for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);

nbArr[nbArr.length] = img;

}

} else if (event == "out" ) {

for (i=0; i < document.MM_nbOver.length; i++) {

img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

} else if (event == "down") {

nbArr = document[grpName];

if (nbArr)

for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }

document[grpName] = nbArr = new Array();

for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

nbArr[nbArr.length] = img;

} }

}

//-->

</script>

</head>

<body>

<div id="bg-y">

<div id="bg-top">

<div id="top">

<div class="shell">

<div id="header">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

</tr>

</table>

</div>

<div id="main">

<div class="post" id="home">

<h2><img src="2012-WEBSITE-PSD-AND-SLICES.png" alt="table" width="556" height="881" /></h2>

</div>

<div class="post" id="about"></div>

<div class="post" id="portfolio">

<div class="portfolio">

<div class="portfolio-nav">

<a href="#" class="prev">Previous</a>

<a href="#" class="next">Next</a>

</div>

</div>

<div id="footer">

<p align="center"><font color="#FFFFFF"></font></p>

</div>

</div>

</div>

<body id="one">

</body>

</html>

(CSS CODE)

* { padding:0; margin:0; outline:0; }

body {

font-family: Arial, sans-serif;

font-size:12px;

line-height:18px;

color:#666;

background-color: #0e0707;

background-position: center center;

background-image: url(../../body.jpg);

}

body, html { min-height:100%; height:100%; }

input, textarea, select { font-family: Arial, sans-serif; font-size:12px; color:#333; }

textarea { overflow:hidden; }

a img { border:0; }

a { color:#ff0030; text-decoration: underline; cursor:pointer; }

a:hover { color:#b91c3a; text-decoration: none; }

.left, .alignleft { float:left; display:inline; }

.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }

.ar { text-align: right; }

.ac { text-align: center; }

h1 { font-size:45px; line-height:45px; color:#fff; text-transform: uppercase;}

h1 a{ color:#fff; text-decoration: none;}

h1 a:hover{ color:#ff0030; }

h2 { font-size:26px; line-height:30px; color:#ff0030; font-weight: normal; }

h1, h2, #navigation { font-family: "Trebuchet MS", Arial, sans-serif;}

#bg-y {

min-height:100%;

position:relative;

background-repeat: repeat-y;

background-position: center 0;

}

#bg-top {

width:100%;

background-repeat: repeat-x;

background-position: 0 0;

}

#top {

width:100%;

background-repeat: no-repeat;

background-position: center 0;

background-image: url(../../new%20background.jpg);

}

.shell { width:980px; margin:0 auto;}

#header {

height:280px;

position:relative;

}

#header h1{ padding:140px 0 0 10px; }

#navigation { width:134px; height:316px; position:absolute; top:0; left:0; font-size:13px; text-transform: uppercase; left:740px;}

#navigation ul { width:134px; height:196px; background:url(images/navigation.png); text-align: center; font-weight: bold; padding-top:120px;}

#navigation ul li{ list-style-type: none; padding-bottom:13px; position:relative; }

#navigation ul li a{ color:#000; text-decoration: none;}

#navigation ul li a.active,

#navigation ul li a:hover{ color:#ff0030;}

#main { padding:0 155px 30px 135px; }

.post { padding-bottom:30px;}

.post h2{ padding-bottom:5px;}

.post p{ padding-bottom:15px;}

.portfolio{ padding:5px 0 15px 0; position:relative; }

.portfolio .jcarousel-clip{ width:690px; height:277px; position:relative; overflow:hidden; }

.portfolio-holder{ width:690px; height:277px; position:relative; overflow:hidden; }

.portfolio ul { list-style-type: none; width:696px; height:277px; position:relative; overflow:hidden; }

.portfolio ul li{ float:left; width:222px; display:inline; margin-right:10px; height:277px; position:relative; overflow:hidden; }

.portfolio ul li a{ display:block; width:222px; height:123px; background:url(images/img.jpg); text-align: center; font-size:0; line-height:0; padding:9px 0 0 0; margin-bottom:13px; }

.portfolio-nav a { font-size:0; line-height:0; text-indent: -4000px; width:60px; height:60px; top:113px; background:url(images/portfolio-button.png); z-index:10; position:absolute; }

.portfolio-nav a.prev { left:-80px;}

.portfolio-nav a.next { left:706px;}

.contact-form {}

.contact-form .left{ width:430px; }

.contact-form .right{ width:252px; position:relative; right:-26px;}

.field { display:block; border:solid 2px #442323; margin-bottom:8px;}

.field input,

.field textarea{ border:solid 1px #1a1a19; background:url(images/field.jpg); padding:4px 5px; width:236px;}

.field textarea{ height:73px;}

label { display:block; color:#ff0030; padding-bottom:3px;}

label span{ color:#666;}

.submit-form { background:transparent; border:0; text-decoration: underline; cursor:pointer; float:right; padding:0; color:#ff0030;}

.submit-form:hover { text-decoration: none; }

#footer { padding:10px 155px 30px 135px; font-size:11px; color:#555;}

#footer a{ color:#666;}

March 31, 201016 yr

I haven't read through all your code, but....

If you give the body tag a different id on each page - you can then pick up the div that you want to assign a different image to through the css.

Say the div with the background is #content

the first case of

#content {

/* give background image */

}

will set the default value for any non specified, or labelled body tags on the site, then you can use:

body#about #content {

/* give 2nd background image */

}

body#contact #content {

/* give 3rd background image */

}

etc

Background Images

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)