What is a relative path?

FAQ CSS FAQ
#1

Question

What is a relative path?

Answer

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.

18 Likes
FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Background Image
#2

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!

5 Likes
#3

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

2 Likes
#4

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

2 Likes
#5

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.

12 Likes
#6

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

1 Like
#7

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.

5 Likes
#8

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!

#9

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?

#10

This article is really helpful: https://coder-coder.com/background-image-opacity/#:~:text=There’s%20no%20CSS%20property%20that,for%20the%20background-image%20property.

1 Like