I am creating my first website and completely stuck. I have made a simple xhtml file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Practice</title> <link rel="stylesheet" type="text/css" href="first.css" /> </head> <body> <h1> Checking my Work </h1> <p>a simple paragraph a simple paragraph</p> <p>another simple paragraph</p> <p>and yet another simple paragraph</p> </body> </html> and an associated CSS file: body {background-image: url(SEO cubes.jpg) background-size: 100%; background-repeat: repeat; background-position: top left;} body h1 {color: #6699CC} body p {color: #CCFFCC} The direct to the css file works fine and I have been toying with background and font design and having no trouble. I have used a number of images and think I have the url set correctly (both direct to the file and relevant). The images are right on my computer and I cannot get them to load. I have tried to do it in notepad++ as well as in aptana and I cannot get the image to view on IE8 or FF. This last CSS attempt was also a fail. I have tried simple body background-image:url ...... and fail as well. I have tried different images, tried different sizing, and z indexing and every other modification I can think of or get from any tutorial and everything fails. I just want to get an image on the background of my page. Any help would be greatly appreciated. If it is necessary, I am on a windows xp media edition, working in aptana and have created images in GIMP and the above image to test.
I'm pretty new to this stuff too, but i think your problem is the background image url. I don't think you can have a space like that, instead save the image with an underscore like: seo_cubes.jpg. Then change the url to match, save the document, and reload in your browser and you should be good to go. I am learning everything from W3schools.com. They have tutorials for what seems like everything. (however i'm new, so i dont actually know ).
I did as you suggested and tried the dash for this particular image. I have tried a number of other images as well with simple filing names and same result. No image. Is the size of the image a problem? I have tried a number of things with different size images trying to get the to rescale with css styling. I am under the impression I can take a 1px wide or tall image and have it load faster and repeat to cover the page. I have seen conflicting information that leads me to believe I may need to save the image in the exact size of my page and area I want to cover. This makes no sense as how does this accommodate differing screen sizes? If you have an image you know will work that you can test and send direct me to with a codeline I can copy and paste in my css file to test, that would be very helpful. Thanks for any help
You can, just take a 1 or 2 px wide by say 1000 px image and set it to backround repeat-x, this should allow you to have a nice backround. I did it here on this website, http://sunnycalhomes.com, I'm using a 2 pix wide by 1000 px liner gif and I'm repeating it-x. Other wise you can just set the backround to a solid color.
I have tried a small slice and no luck. What I need is a code and picture that someone knows works so I can isolate my problem as a url issue (as I am viewing on my own computer and images are directly on computer....not even stored on a server at this point), a coding issue or an image issue or just my own personal issue. I have tried different slices with the corresponding repeat x or repeat y and no luck. I can't get any image to load period and just need to get any image to work. I can get a background, but I want to put a nicer gradient background and (as far as I can tell) I need to have an image repeat to do this. If I could just code the gradient background into css, that would be cool, but I don't think it is possible. Still, the core issue is to get any image to work as this needed at some point.
body {background-image: url(../images/middle.jpeg); background-size: 100%; background-repeat: repeat; background-position: top;} The attachment shows the location and the image is a 1px tall by 800px wide simple gradient background slice created in GIMP. Any image will work as I am just trying to isolate the issue and get any image to actually work at this point.
Is that's how you have the images and CSS, this should work: body{background: url(images/top.jpeg) repeat top} Code (markup): Just use the image you want.
I cut and paste your sample line and also tried to / and ../ in front of it and no go. I cannot get any image to work and I cannot figure why. I am doing everything I can find and nothing. I keep testing in FF and the text from html shows, but no background image. I can put a background color, but images will not display.
My apologies. The last reply was a bit hasty. When I copied and pasted, I put it inside the brackets of my own code line so it was an obvious fail. Your line got me an image. It looks bad, but that was not the question. I now have something to work with. Thank you!
Did you try it with the underscore? Also make sure you have quotations around the url inside the brackets. I did two codes one with a space instead of an underscore and one with the underscore. i used this code and failed (without the underscore, but with a space): and then i used this code, and it worked. (i did both in notepad, then opened to check in firefox.)