image as background

**cragga_lfc** · 05-19-2008, 01:18 PM

hi i was wondering if anyone could answer my question

i would like this image -
http://www.wallpapersforvista.com/wa...0Jungle&id=127

to be my background instead of the green i have chosen on the site i am developing - http://www.greenwaysinc.co.uk/

does anyone know how i can make this my background in dreamweaver cs3

cheers

**jscheuer1** · 05-19-2008, 01:52 PM

Download the image, optimize it for the web, put it in the same folder as your page, and set it as your background image using css style (from your source code, addition red):

Code:

<style type="text/css">
<!--
.style1 {
	color: #FF0000
}
.style3 {
	color: #000000
}
body {
	background-color: #339900;
	background-image: url(Aurora%20Jungle1185648491-800x600.jpg);
}
.style5 {color: #339900; font-weight: bold; }
.style6 {color: #339900; }
-->
</style>

**cragga_lfc** · 05-19-2008, 02:37 PM

Originally Posted by jscheuer1

Download the image, optimize it for the web, put it in the same folder as your page, and set it as your background image using css style (from your source code, addition red):

Code:

<style type="text/css">
<!--
.style1 {
	color: #FF0000
}
.style3 {
	color: #000000
}
body {
	background-color: #339900;
	background-image: url(Aurora%20Jungle1185648491-800x600.jpg);
}
.style5 {color: #339900; font-weight: bold; }
.style6 {color: #339900; }
-->
</style>

thank you for your response really appreciate it but please forgive me for being a newbie or coming across extremely thick -

i have downloaded the wallpaper, how do i optimise it for the web?

i understand about putting it in the same folder

and i dont know what to do with the css style

the code you gave me what do i do with it??
or do i just copy and past it into the HEAD or BODY of the page?

sorry i am extremely new to this and i appreciate your efforts in helping me out.

cheers

**jscheuer1** · 05-19-2008, 02:46 PM

The code I gave you was copied from the head of your page, I just added the red part.

You don't really need to worry about optimization, not just to get this to work. Image optimization is a process whereby one finds the optimal dimensions and resolution and/or number of colors for a good look at the least amount of bytes required. It is a very good practice to follow with any image used on the web, as it speeds page loading.

**shotgun_ninja** · 05-19-2008, 02:50 PM

Originally Posted by cragga_lfc

thank you for your response really appreciate it but please forgive me for being a newbie or coming across extremely thick -

i have downloaded the wallpaper, how do i optimise it for the web?

i understand about putting it in the same folder

and i dont know what to do with the css style

the code you gave me what do i do with it??
or do i just copy and past it into the HEAD or BODY of the page?

sorry i am extremely new to this and i appreciate your efforts in helping me out.

cheers

Okay. You're using Dreamweaver CS3 (which is kind of irrelevant, anyways

) , so do this: Open the page, click the "Code View" button, and find your head. It should look like this:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Whatever the title is</title>
</head>

And anywhere between the <head> and </head> tags, add this line:

Code:

<link rel="stylesheet" type="text/css" src="styles/style.css" />

Then, make a new text file (or CSS file from Dreamweaver) named style.css, if you don't already have one (in which case you could just add this to that file), move it into the styles folder (meaning (website-folder)/styles/style.css) and open it in DW or Notepad.

Then, to that file, add the following:

Code:

body {
	background-color: #339900;
	background-image: url('Aurora%20Jungle1185648491-800x600.jpg');
}

This is a stylesheet. It can also be added to the page using the <style type="text/css">...</style> tag set, but that is depreciated. It still works, but it is not recommended.

When you're done with your website, you might want to check out Dreamweaver's built-in HTML and CSS help files (I think they're called O'Malley, O'Riley, or something like that) and read up on it. Believe me, I don't pretend to know everything about web programming, but the golden first rule of programming is to read the manual, and it REALLY helps.

Good luck!

EDIT: You don't come across as thick; just inexperienced. We've all been there, dude.

EDIT: Come to think of it, you could take all of the text from inside the <style></style> tags on your page and put them into your new style.css file, if you want. It would probably make editing site-wide styles much easier, no searching through multiple files to find that one faulty style.

**cragga_lfc** · 05-19-2008, 02:53 PM

thanks for your comment chaps i really appreciate it

seems hard but once i give it a crack i am sure i'll be ok

nice one again chaps

**cragga_lfc** · 05-19-2008, 03:24 PM

just a thought chaps do i have my own style sheet called twoColLiqLtHdr.css

<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="http://www.greenwaysinc.co.uk/tswnavbar.css"

if so can i insert the code into this file instead?

cheers

**jscheuer1** · 05-19-2008, 04:00 PM

Yes, you have two of them, as you note. Here in http://www.greenwaysinc.co.uk/twoColLiqLtHdr.css (red):

Code:

body  {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	background: #666666 url(Aurora%20Jungle1185648491-800x600.jpg);

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

	padding: 0;

	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

	color: #339900;

}

is where you can put the value for the background image. The image now should go in the same folder as this css file. I think that's the same as the page though in this case, but if you have other pages in other folders that also use this css file, it makes life easier.

But, the styles on your page override the styles in this file, so any property duplicated on the page with a different value set will take precedence.

**cragga_lfc** · 05-19-2008, 04:13 PM

cheers mate ill give a crack tonight when i get in from the gym

little things like this seem hard at the beginning but once you have done it and tried it - you kind of get to grips with it.

cheers again

Thread: image as background

Thread Tools

Search Thread

image as background

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to shotgun_ninja For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions