What is a relative path?
A relative path is an address that points to the current directory or project folder. In the example illustrated in this lesson, the relative path is images/mountains.jpg and it assumes we have an images subfolder nested within a project folder.
Hi!! I want to know whats is the difference between add an background image on CSS and add an image on html? In this exercise, for me , it looks like they have the same purpose!
In html, you use tag then input your url when your type src e.g img src = www.wheretheimagis.com/image
but for css, you use url command (instead of scr command in html) to fix in your image.
guess the difference isn’t much
how about if i have two folders in the same directory with my picture in one of the folders and my css file in the other folder. how do i get the relative path between the picture and the css file
lets say you have:
assets
|++ css
|++ style.css
|++ images
|++ my_image.jpg
you can use .. to traverse to the parent directory, so then you get ../images/my_image.jpg in your stylesheet.
Hi.
I was wondering the same thing.
I guess the answer would be in the flexibility of styling an element on your page in CSS and easily swap out the image url but keeping the styling in place.
In html (without CSS) you would have to style that specific image within the <img scr> tag being
i.e.<img scr="http...." height=300px width=200px border=4 align=right >
meaning that the chance for error and losing styling when changing the image is bigger
Hope that is a correct interpretation and answer to your question
Consider a <div> in which
Case I: You put image using <img> and now can you add text to <div> on that Image?
Case II: You add background image on css and now you can add text to <div> on that image.
In css it’s like we write on an Image while in html it is like we put a image on a paper and write below that image.
Is there a way to make the background image opaque, but not the caption? In other words, can I make the background image have difference opacity than the caption?
Thanks!
Why adding an image to the style sheet while we can just put it in the HTML from the binning?
and what determines the size of it?
plus can we add a photo to be the background of the whole page and like adding a text in another colored background?
This article is really helpful: https://coder-coder.com/background-image-opacity/#:~:text=There’s%20no%20CSS%20property%20that,for%20the%20background-image%20property.
I have a problem with some images on my phone.
I code from my mobile(VS Code) and I write the relative path of my downloaded images and it doesn’t show me the image on the editor result…
Also I tried to write the name of the jpeg. (ex. “shoes.jpeg” and again didn’t show me anything…
I face same problems sometimes when I work in my PC. I think in your case the file where you are coding isn’t in the same folder as the image. Like when you code in the editor you save the file somewhere. And basically when we download an image its in image folder. That could be the case.
I know its late. I bet you already figured it out. But anyways , thought it might help.
Simply put a relative file path starts at where you are in the file tree and lists the steps to the destination file. As opposed to an absolute path which is the full file tree address.
Relative path is typically helpful because, when you start a project you have a project folder and in that folder you have files like index.html and style.css ,but you also have sub folders full of things that you have collected for project like pictures ,or videos ,or fonts or audio files etc etc. So instead of having to place the full absolute address into your code every time you want to reference these things, a short relative path to things in your project folder can be much easier.
This was a very helpful explanation of it for me, thank you!
Path: means the destination file stored in locally or internet.