Jump to content

Isaac19

Members
  • Posts

    23
  • Joined

  • Last visited

Everything posted by Isaac19

  1. It would be a relative path, and I am trying to picture the structure of everything relative to the very image in order to retrieve it and make it a background and do this from the CSS file. I think what you referred to above was an absolute path. I am trying to figure out how the image would be accessed from the images folder located at the current web. Ugh “current web” is what’s throwing me off. So, i ll give you the structure of the site I have going on DESKTOP ———Level 1 MY WEBSITES FOLDER ———Level 2 Name of Website Folder ——— Level 3 about.html contact.html products.html Css Folder- styles.css Images Folder img1.jpg img2.jpg img3.jpg So, when w3school says: In this example, the file path points to a file in the images folder located AT THE ROOT of the current web. In order for me to understand this, I want to know what does it mean by CURRENT WEB? Does it mean Level 1? Level 2? Level 3? Clearly, for me, current web would be or mean Level 3, and I have tried it, but it doesn’t work, it doesn’t retrieve the image to make it a background within the body of the website through the body element in CSS. So, what does “CURRENT WEB” mean and what am I doing wrong in relation to the structure I just mentioned?
  2. Well, I know what you mean. But my intention in understanding this finds itself in the context of using the body { background-image: url (“image.gif”); property. You see, within the “____” there are several options, one of which is what I asked above: src="/images/picture.jpg" picture.jpg is located in the images folder at the root of the current web So, what I want to know, is if I am creating a background-image for the body element, where exactly would my picture.jpg be when it is saying “Current web”? What does mean when it says current web? What is the current web? What web? Because as I understand, the current web could mean the many files and folders I have created within main folder where all folders and files are located for the website. Lol its vague in my opinion. I know that every / keeps pointing to the root above it. Like for example, I have a folder with images, and image1.jpg is within this folder, this to get it, I may refer to it as images/image1.jpg where images is the root folder for image1.jpg and if images folder is located within the main folder then you can refer to it as /images/image1.jpg. And so on and so forth, but I want to know what “root of the current web” is. I can’t know this unless what “current web” is referring to and I need to understand this in the context of using images for background-image in body or simply for img within the main code of the body. Btw, thanks for helping.
  3. Mmmmm id need to see a picture. I am a visual person. I understand for the most part, but I still don’t get this one. I have understood the others but not this one. I have tried putting it into practice, but it doesn’t work. .And the reason I have tried that is so I can get a visual of what it means in practice.
  4. So, can someone help me understand, visually, what this means and how to make it work? <img src="/images/picture.jpg"> WHEN picture.jpg is located in the images folder located at the root of the current web What does it mean by "root of the current web"?
  5. lol I see what you mean, and maybe I didn't explain myself correctly as I am new to creating websites and html and css. So, what I want to do has not so much to do with a particular browser like, say, Safari, Opera, or Firefox, but it has to do with what happens when you are resizing a window.For example, with Safari, I press Command and + to enlarge the content within that window as much as it can, the max, or I press Command and - to decrease the content within a window to the minimum it can do. And when I do this with pages like this one I am typing in, the content within them becomes smaller like using a font size but the elements do not move from their places. The elements do disappear after you begin at enlarging at a certain size but when you make them the smallest, everything remains there. Now, I understand when enlarging, some elements will disappear because of the enlargements and that's fine. But the elements stay within their places, they do not move from their blocks or inline-block assigned displays. So, that is what I want to achieve. I wish I could upload a screenshot here, but I am not allowed. I have maxed it out my allowable sharing of screenshot space. But let me try to show you visually 1.) LINK LINK. LINK LINK LINK (normal window...total of 5 links here) When I resize to either smaller or larger, this happens: 2.) LINK. LINK. LINK LINK. LINK (this is what happens when enlarging....no links disappear in my site....but in the ws3 links begin to disappear the larger to enlarge the content of the page...so in essence I am speaking of enlarging the content or making it smaller....not necessarily maximizing or minimizing the window itself...though the links do begin to disappear as you minimize the window.....anyways, the idea is changing the content size as well as have the ability to maximize or minimize a window size and have the elements remain in place as well as prevent them from disappearing). 3.) If I have centered a nav bar and the content in a page: Then everything stays in place centered More specifically, if you want a visual of what I mean, go to the ws3 site: https://www.w3schools.com/html/default.asp and click command and + or command - and see what happens (Safari) I don't think I want it exactly like that because in the ws3 site, the Navigational Bar, as I enlarge the page, some of it's nav links disappear. And I don't want that to happen to my site. Hopefully, I haven't over-explained myself. lol Oh and after typing all this, I went into photoshop and resized images so I could be allowed to upload lol
  6. So, I am creating a website for fun, and I am new to this. I have just added a nav bar and some pictures and have figured out how to center them. Now, my dilemma is making sure that they stay in place when I resize the browser. Can anyone help with this? I have centered the nav bar and the images but that gets moved around when I resize the browser (I am using Safari and FireFox). For example, the nav bar, at the smallest browser size is perfectly centered, but if I make it smaller, everything gets moved around, and I want to make sure things stay the same regardless of browser size.
  7. It has been on that setting since I have been using it. The background-image property was simply not working. And why it wasn't working, I simply do not know. But seeing how sensitive code can be to the most minor of changes or missing things, I can see how everything needs to be in place. But the background-image property is now working. It's frustrating because it I was doing things right by the process of elimination, which on the same day before creating this post, I had used the right choice. I didn't understand it then, but I do now, thanks to you and more reading.
  8. Ugh, so how do I fix that? I was not aware of this. Is this because of the TextWrangler? Or is it because of the UTF-8? And I ll be frank, I wasn't putting in the UTF-8 before...I finally did it at the end, but that still didn't fix things. So, what do I do?
  9. oh and by the way, the very correct URL was the one you had suggested: body { background: url("../images/Art 1.jpg");}, which I used in the DUMMY website. I know in the above message, I didn't type it that way, but I did after and used it with just background property.
  10. Have you tried the code on your side? Because on my side it is just not working. It only worked when I used the background property instead of the background-image property. So, I know that the url is correct. I had been going through every choice of url syntax and nothing worked. And I'd even used everyone of the ones you had suggested before you had suggested them, and I tried again when you suggested them again, but nothing. So, it must be the background-image property...unless there is some hidden code within TextWrangler that predisposes the background-image property to not work? Just brainstorming here.
  11. Here is the code for the DUMMY PAGE. What invisible characters are you referring to? Isn't this literally an almost empty page, devoid of any CSS except for the background-image property as well as the usual elements and the link to the style sheet within that one page? I am confused. Because even in that DUMMY page, DUMMY CSS, it just doesn't work. Also, I am using TextWrangler. In the DUMMY site, I eliminated every element except the necessary/basic ones. And in the CSS there is only one property: background-image. So, what invisible characters could there be? Ugh. <!DOCTYPE html> <html> <head> <title>DUMMY SITE</title> <link rel="stylesheet" type="text/css" href="css/hello.css"> </head> <body> Hello World! </body> </html> And here is the CSS code for that page: body {background-image: url ("../Art 1.jpg"); }
  12. Perhaps, background-image has finally been made redundant and wordy.
  13. And it worked for both sites, the one I am creating, and the phony one.
  14. Actually I just figured out...the background-image property is simply not working. What worked, however, was simply using: body { background: url ("../images/Art 1.jpg"); } I skipped using -image. And that worked.
  15. Here is the code for the only page: <!DOCTYPE html> <html> <head> <title>DUMMY SITE</title> <link rel="stylesheet" type="text/css" href="css/hello.css"> </head> <body> Hello World! </body> </html> And here is the CSS code for that page: body {background-image: url ("../Art 1.jpg"); }
  16. I have exhausted all my options. I have even created a completely new website without anything in it except one image, one page, and the css file. I will attach pics here for you to see. It's still not working. And I have tried every syntax or version of background-image I can possible enter. I am attaching files here for you to see. If you see something that I am not seeing, do let me know. I truly appreciate your help as this is driving me absolutely nuts. haha,
  17. Yes I tried that too before you mentioned that here, but it still did not work. And I just tried it again and still doesn’t work. And although w3schools says to use “images/Art 1.jpg” in its examples for the background-image property, many books say ‘images/Art 1.jpg’ and yet other books say “images/Art 1.jpg” but nothing is working. Also, my images folder is not inside the CSS folder. CSS folder which contains the stylesheet.css file, is on the same level as images folder. Thus, CSS and IMAGES are siblings, and they are children of MAIN folder. Remember I said I used images in the about.html and the path was images/Art 1.jpg.
  18. And I already tried deleting everything in the about.html except the Nav bar. I also created a new stylesheet that contained only the background-image property and applied to the about.html page. And it still didn’t work. Ugh
  19. I am sure you guys understand that I need to distribute this property from within the styelsheet so it can go to all the pages at once. Thus, saving me time by going from page to page.
  20. And yes, URLs are relative to the Stylesheets’ location. I wanted to apply the background-image property to all of my pages. And yes, all the pages have the stylesheet link within them. When I use the background color property, it works fine. I just cannot figure out why the background-image property won’t work. Also, I want to reiterate that I want to apply the background-image property to the Body element. I tried going directly into the about.html’s body element and applying the background property from within, which would only affect the body of the about.html page, and it worked But done from the CStyleSheet won’t work. This is what I used for that: <body background="Art 1.jpg">. It worked perfectly.
  21. Hey Ingolme, so here is how I have arranged my folder. NameOfSite folder inside this folder are about.html contact.html products.html images folder css folder I want to re-iterated that I used the images in the about.html page and it worked just fine: <img src =“images/Art 1.jpg” alt=“Hello World” width=“200” height=“300”> was what I used within the about.html page And I wanted to just test the background-image property and this is what I used: { background-image: url ("images/Art 1.jpg"); } So I am not sure why it works within the about.html page but the same url “images/Art 1.jpg” won’t work within the CSS.
  22. Hello everyone, so I am working with CSS and the background image is not working. No matter what I do, it simply wont work. Here is the code. Check the bolded part. Some might say it may not be in the right folder. But I know it is because I have images in the About page and the format is the same I am using for the background-image specification: images/Art 1.jpg. My folders are formatted as such: MAIN folder. Within MAIN folder is the images folder and the css folder. Now, notice how I wrote the code within the About page: This is the code for the About page for one image. <img src="images/Art 1.jpg" alt="Hello World" width="200" height="300"> (this code worked perfectly and the image shows and/or was retrieved perfectly. So, I don't know why it isn't working in CSS Furthermore, I have tried it all with Safari and Firefox. Background-color works perfectly. This is my CSS Code p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; color: #cc0000; text-indent: 5em; margin: auto; padding: auto;} body { background-image: url ("images/Art 1.jpg"); } /* Top Nav Bar*/ ul {list-style-type: none; margin: 0; padding: 0;} li {float: left;} li a {display: block; color: white; text-align: center; padding: 14px 16px; margin: 100; text-decoration: none; background-color: pink; border-radius: 0px; width: 240.7px; border: 1px solid black;} li a:hover { background-color: darkblue; color: orange;} .active {background-color: purple; color:yellow;} /* Images styling*/ div.images {width: 1680; display: block; padding: 100px; margin: 10px; }
×
×
  • Create New...