I see people using the background-image url in css and they have files like file.jpg that work. How do I get mine like that?

Answer 1

check out the CSS course.
Background images

Answer 2

You will find the answer as you get to the following chapter in CSS course, I see you're learning it right now:

Properties → Background Image

Answer 3

Do you have a work in progress related to this question? maybe in Code Playground? if you do, please link the code in the question, so people can clearly understand where your problem is.

I don't quite understand what you mean by "how to name the file" here, sorry if I misunderstood this point, but if you're working in your PC/Laptop, for the html/css/js files, most editors usually have something like File - Save, or File - Save As menu, and we use it to save our work where we want, and we can give the file a name there. The same case for images, in Image editor they usually also have such method to save and name a file.

To get the url of an image file in your PC/Laptop, you can drag and drop the file, from your file manager into a web browser, you can then see the file url in browser's address bar.

Answer 4

There are two ways to describe a file url or path for linked resources such as images, css or JavaScript files, the first is called absolute path, where you specifically define a full path to the file, and second is called relative path, where the path to the file is determined relatively to the file where the link is defined, for example, with the following directory structure:

/web/htmldocs/myhtml.htm
/web/styles/mycss.css
/web/js/myjs.js
/web/images/myimg.jpg

Inside myhtml.htm you can link an image like:
<img src="../images/myimg.jpg" alt="Example">

And you can link to CSS file like:
<link rel="stylesheet" type="text/css" href="../styles/mycss.css">

Or you link to JavaScript file like:
<script src="../js/myjs.js"></script>

In mycss.css you can define background image for document's body like:
body{
background-image:url("../images/myimg.jpg");
}

Answer 5

Sorry, I had to break the answer because the answer exceeds character limits. Here are some good readings that can explain better than me:

[CSS background-image property]
https://www.w3schools.com/cssref/pr_background-image.asp

[HTML file paths]
https://www.w3schools.com/html/html_filepaths.asp

[HTML link tag]
https://www.w3schools.com/tags/tag_link.asp

[HTML script src attribute]
https://www.w3schools.com/tags/att_script_src.asp

Hth, cmiiw

Answer 6

make sure you put the right path, otherwise it wont show up

Answer 7

It didn't teach me the thing I wanted. I want to know how to name the file and how should i get the url from the image.

Answer 8

example you have "style.css" file in folder named "css", and you have another folder next to css folder named "img".
inside that folder there is a single image named "back.png".
so from style.css to access that image you can using "relative path".
example

background: url(../img/back.png);

".." mean access the folder before,
if image wont show up, try to reload your css file in browser..