Oceancolour5 Posted April 11, 2006 Share Posted April 11, 2006 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 More sharing options...
SillyBilly Posted April 12, 2006 Share Posted April 12, 2006 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.<{POST_SNAPBACK}> 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 More sharing options...
patacboy Posted April 12, 2006 Share Posted April 12, 2006 is the picture in the same foder as your web page?? I've had the same problem once, it turns out the picture is in a different folder so make sure your directing css to the folder where your picture is. Link to comment Share on other sites More sharing options...
Oceancolour5 Posted April 12, 2006 Author Share Posted April 12, 2006 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 More sharing options...
Oceancolour5 Posted April 12, 2006 Author Share Posted April 12, 2006 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. Link to comment Share on other sites More sharing options...
username132 Posted April 12, 2006 Share Posted April 12, 2006 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.<{POST_SNAPBACK}> 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 More sharing options...
SillyBilly Posted April 13, 2006 Share Posted April 13, 2006 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.<{POST_SNAPBACK}> 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 More sharing options...
Oceancolour5 Posted May 19, 2006 Author Share Posted May 19, 2006 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 More sharing options...
justsomeguy Posted May 19, 2006 Share Posted May 19, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now