How to change backround image in HTML

Question

I'm not sure if this has already been asked on this site or not, but this is an issue I'm running into while programming the website for my own personal blogging business.

<div 
  class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" 
  style="background-image:url('http://placehold.it/960x668');">
    <div class="h-sm-400px"></div>
</div>

Where it says style="background-image:URL('web URL')" How would I go about changing the source to a local file on my desktop rather than an image from the web?

You would simply include the path to your file in the project structure like `url("/some-dir/some-file.jpeg")` just like any other URL. — Tanner Dolby, Feb 10 '21 at 17:12
Does this answer your question? [How to give the background-image path in CSS?](https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css) — 0stone0, Feb 10 '21 at 17:12
"I'm not sure if this has already been asked on this site or not" Why not search before asking? — adampweb, Feb 10 '21 at 17:12
@SethB Why not? 'local' files become 'public' files while hosting on a 'public website'. But you can still use local files? — 0stone0, Feb 10 '21 at 17:17
You need to upload the local files to the server and then add the path to CSS. you can't connect a local file to web server directly. — Onkar, Feb 10 '21 at 17:18
@0stone0 If he is using something like a shared server, managed VPN, or anything but a home server, he can't serve image files from his computer to his blog. — Seth B, Feb 10 '21 at 17:19

score 0 · Answer 1 · answered Feb 10 '21 at 17:37

0

If you can, upload it to your server and do

<div 
  class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" 
  style="background-image:url('./path/to/image');">
    <div class="h-sm-400px"></div>
</div>

If for some reason you can't, you can upload it to some image hosting site (like imgur), or you can upload your image to an image to data-uri site (like this one) and put the data URI.

answered Feb 10 '21 at 17:37

Lakshya Raj

1,669
3
10
34

I wasn't the downvoter, but I could probably tell you why someone would. Your answer would be better suited as a comment since others have already stated adjusting the `url()` would solve the problem. – Tanner Dolby Feb 10 '21 at 19:26
@TannerDolby: I don't see anything wrong with adjusting the `url()` because it seems like the thing that would answer the question. Also, for this type of question, all answers can be as short as comments. Well I guess some people may know a bit more on how this works. – Lakshya Raj Feb 10 '21 at 20:01
I already posted in the first comment what your answer essentially repeats. Does that make it more clear why you were downvoted? Others included resources for the OP to answer his own question too. – Tanner Dolby Feb 10 '21 at 20:02
1

@TannerDolby: Oh, so I'm repeating what other's have said. Thank you for explaining! – Lakshya Raj Feb 10 '21 at 20:04

score -1 · Answer 2 · answered Feb 10 '21 at 17:24

You are going to have to upload your images somewhere online (not local), then you just simply change the URL to your new image.

For example:

I have an image puppy.jpg I want it on my blog.

I upload it to ImgBB.

Now I add it to my CSS:

<div class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" style="background-image:url('https://imgbb.com/MY-IMAGE');">
  <div class="h-sm-400px"></div>
</div>

How to change backround image in HTML

2 Answers2