Can someone please give me the CSS for Dummies instruction....

[OneGrassRoot]

on how to 1) insert images and 2) insert a background image for the main pages.

I've read various sites and, for the life of me, I'm drawing a huge blank.

When I see this line in the CSS code: background-image:url(bg.jpg);

Where on earth is the image in question? How do I get an image from my computer into the CSS?

And, you know how the backgrounds are often an image, rather than a simple color since it involves a gradient....is there something even more challenging about inserting that?

Thanks. :cry:

[Why Syzygy]

1. okay .. you know I can't answer that ...

but I like to play along. charlie etal will REALLY help you :D
(I've played around with html and those old make it yourself web pages, but am not interested enough to actually PURSUE.)
Don't mind me :blush:

Do you have an image directory? Looks like the way youtube does it.


<style type="text/css">
body{
-color: #006599;
background-image: url(http: //i4.ytimg.com/bg/GoyRLKfZflhqjisKY9lgGw/default.jpg?app=bg&i=3492957);

Really sorry for whatever it is I'm doing here. It most certainly isn't making light of your troubles :hug:

[OneGrassRoot]

2. lol.....

So, where would I create this elusive image directory...I never see the actual url SHOW in the CSS code, so I wonder how I would even insert a location, without the location showing?

LOL

I know this is dumbass crazy, but the instruction assume one understands this little point, and I'm stuck before getting up at bat.

;)

:hug:

[Why Syzygy]

3. this would be where

my ignorance of CSS can truly shine!

With html, you've got different folders (directories) on the domain. One page might pull an image from that directory to display on a page stored on another directory (folder). Is CSS the only page on the domain?

[OneGrassRoot]

4. Goodness if I know....lol

All I have access to is the stylesheet, and I can change colors, font sizes, and different things, but images are a complete mystery. There's obviously something I don't have access to that I need to have access to.

Oy.

Thanks for trying. :)

[Why Syzygy]

5. Shot in the dark.

But at least we got to visit! :hi:

[charlie]

6. Ah, it sounds like your trouble is with addressing where the image is

Not with CSS. Am I right?

There are two kinds of addressing, absolute and relative. These both apply whether you're working from a server or your desktop. The mode of addressing in the CSS examples you're seeing are relative.

Absolute addressing is merely specifying the entire path of the image from the root.

Relative is specifying the path relative to the calling document, ie, your webpage.

Suppose you've created a hierarchy for your project on your hard drive and it looks like this:

C:/mywebsites/project_1

And you've created an HTML page in the project_1 directory, so its address looks like this:

C:/mywebsites/project_1/mywebpage.html

If you place the background image in the project_1 directory -- we'll call it bg.jpg -- it's in the same location relative to the calling document, so the address would look just like the examples you've seen:

background-image:url(bg.jpg)

The absolute address would look like this:

background-image:url(C:/mywebsites/project_1/bg.jpg)

The image and the HTML page using it are in the same place, so no path is needed for relative addressing. Just name the image.

Relative addressing has a couple of conventions that allow you to navigate the path from the calling document. One is the double-dot-slash (../). Each double-dot prepended to the address moves the home base of the address one directory higher. From the earlier example:

C:/mywebsites/project_1/mywebpage.html

Suppose you have have your images collected in a directory under 'mywebsites' called 'images', where the image 'bg.jpg' resides:

C:/mywebsites/images/bg.jpg

To address it relatively, a single double-dot shifts the address base one level higher in the path, and you can complete the path from there:

background-image:url(../images/bg.jpg)

If it's two levels higher -- C:/images/bg.jpg -- use another double-dot:

background-image:url(../../images/bg.jpg)

Relative addressing has another shorthand, the single slash. That takes the base point all the way back to the root. This:

/images/bg.jpg

is equivalent to this:

http: //

[OneGrassRoot]

7. You're a very good instructor!

Even for this dummy. ;)

Thank you...very, very much. That explains a lot.

:)

[charlie]

8. Thank you

Let's illustrate with a working example. Copy this into a text editor:

<html>
<head><title></title>
<style type="text/css">
body {background-image:url(174406.jpg)}
</style>
</head>
<body>
</body>
</html>

Create a new folder on your drive and save the above into it. Call it whatever you want, just make sure it has an '.html' or '.htm" suffix. 'index.html' will do.

Now, right-click your DU avatar and save it to the same location as your new HTML document.

Click the document and view it in your browser. It should be tiled with your avatar image for a background.

Now, create a new folder inside the folder you just made. Call it 'images'. Move your avatar to the new folder. Make sure it's moved and not just copied, you want the image to be absent from the original folder.

Click the document again. This time, there is no background, since the browser can't find the image.

Change this line:

body {background-image:url(174406.jpg)}

to this:

body {background-image:url(images/174406.jpg)}

re-save the HTML document and click it again. Once again, you'll have a background, because you've re-specified the image's location relatively.

[OneGrassRoot]

9. Must run now, but shall return to this assignment in a few hours....

Thank you for walking me through it with an example. :)

[OneGrassRoot]

13. Quick note to thank you once again. You help is greatly appreciated.

:hi:

:hug:

[2Design]

10. go here for tutorials www.w3schools.com n/t

[Duer 157099]

11. I think charlie has given a really good explanation

regarding where images are located/referred to on the server. Just realize that you have to upload the images to the web server, the same place that the css and html files are (although as he pointed out, people often make a separate folder for images called images, but it's not necessary, especially if the page/site is simple)

As for the gradient background image, let's say you want the gradient going down the page, so, light on top and darker towards the bottom. You'd have to make an image, for example 2 pixels wide by 800 pixels long, of the desired gradient. Then in the style sheet, you use code like this:

background: url(gradientBG.jpg);
background-repeat:repeat-x;

This will repeat the background horizontally across the page, so if someone resizes their browser window, the background adjusts accordingly (repeat-y does the same thing vertically)

[OneGrassRoot]

12. Thank you very much....

Yes, Charlie did a great job - very thorough, and much appreciated!

Thank you for adding to my understanding. :)