Jump to content

CSS Background lesson, I need help.


Oceancolour5

Recommended Posts

Hi,I am learning the CSS and stuck at CSS background. On example 2: Set image as background. <html><head><style type="text/css">body {background-image:url('bgdesert.jpg')}</style></head><body></body></html>I wanted to replace with my own image in my pictures folder ( like IMG_3760) and it didn't work. I think it has to do with the URL but I don't know how. I needed help so I can move on to the next lesson. Thanks. Dien.

Link to comment
Share on other sites

Hi,I am learning the CSS and stuck at CSS background.  On example 2: Set image as background. <html><head><style type="text/css">body {background-image:url('bgdesert.jpg')}</style></head><body></body></html>I wanted to replace with my own image in my pictures folder ( like IMG_3760) and it didn't work.  I think it has to do with the URL but I don't know how.  I needed help so I can move on to the next lesson.  Thanks.  Dien.

In my CSS I have this
background-image: url("pictures/blackmarble3.gif");

Notice that I have in the main folder a separate folder for my graphics called pictures and the URL points to this folder to obtain the gif that tiles as my background. On each page I have in the head

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

Link to comment
Share on other sites

HI,I don't have a webpage. I am Just testing out the lesson's example by replacing the background image on the lesson with the one on saved on my pc desktop. It showed white blank frame. If you look at the CSS lesson on background and replace it with the image of your choice, you will know what I meant.Cheers,Oceancolour5.

Link to comment
Share on other sites

Hi,I think in the lesson's example, I can't replace the image with the one of my choice on the "edit the text and click me" tab which I found a bit odd, or It's me.  This also happend in HTML lessson.Cheers,Oceancolour5.

You probably can replace the images. You just need to do it with pictures that are available online as opposed to on your PC harddrive (the contents of your HD are not easily available to everyone online, as you'd probably want).Try replacing the image with one available online such as
http://username132.tasminslair.com/live/images/seans_potato_business_logo.png

and you'll see what I mean :)

Link to comment
Share on other sites

Hi,I think in the lesson's example, I can't replace the image with the one of my choice on the "edit the text and click me" tab which I found a bit odd, or It's me.  This also happend in HTML lessson.Cheers,Oceancolour5.

You are wise to try to edit the code to see what effect it has. The next step is to type the code rather than copy and paste. You will learn more by typing, even if you are retyping code from an example.To set up a web page from your Desktop follow these steps, (it is only for your computer not the Internet).1. Create a New Folder on the Desktop, and name it.2. Using Notepad create 2 files - a CSS and an HTML (see below). Place them in the New Folder.3. Copy and paste your graphic into the new folder.#2 CSS file - name it something like mystyle.cssHere is a sample one that you can follow,
/* My Stylesheet */body {background-image: url("agraphic.gif");font-family: sans-serif;color: #FFFFCC;font-size: 11pt;}

Replace "agraphic.gif" with the name of the one you put into the new folder.#2 html file - name it something like test.htmlHere is a sample one that you can follow,

<html><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body><h1>Test File</h1></body></html>

Now open your new folder and click on the test.html file. A new browser window should open with your graphic tiled as the background and Test File colored yellow on the page.

Link to comment
Share on other sites

  • 1 month later...

Hi SillyBilly,Sorry, I was off to learn CSS from other place. That's how it is with web surfer. I just came back to the w3 Schools site and tried your test and it worked brilliantly. Thanks man. So are they missing something with the lessons? Cheers,Ocaencolour5.

Link to comment
Share on other sites

The lesson isn't missing anything, if you want to link to an image on your personal computer you need to refer to it with the file:// protocol. But when you develop websites, you never want to link to anything on your personal computer because no one will be able to see it, because it's not on their computer. If you still want to link to an image on your computer, try something like this:background-image: url("file://c:/path/to/image/image.jpg");But it's only useful for demonstration, like I said, you would never use that in a live web page.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...