Css background image, I cannot change the online image to local image

Question

1.00/5 (1 vote)

See more:

CSS

.ws-bg:nth-child(2) { 
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-5.jpg); 
}

i cannot change the online image to local image with this code url("images/image.png");

please help me solve this thank you

What I have tried:

CSS

.ws-bg:nth-child(2) { 
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-5.jpg); 
}

i cannot change the online image to local image with this code

CSS

url("images/image.png");

please help me solve this thank you

Posted 29-Apr-16 19:43pm

Member 12494247

Updated 29-Apr-16 23:39pm

George Jonsson

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 30-Apr-16 1:55am

Most likely, this is because you don't know how path names work. "images/image.png" is relative to the file using it.
Is that what you mean to do?
What is the location of "image.png" relative to "https://s3-us-west-2.amazonaws.com"?
And, by the way, think of the way you ask questions? Isn't that obvious that you don't show important detail?
—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

George Jonsson · Answer 1 · 2016-04-29T22:09:00

As Sergey point out, the relative location of the image is important.
See Quick Reminder About File Paths | CSS-Tricks[^]

Another way is to use the absolute path, but that will sooner or later get you into trouble.
But if you want to do a test you can use the following syntax:

C#

url('file:///<full path="">')</full>

Example :

C#

url('file:///C:/Temp/MyImage.png')

Karthik_Mahalingam · Answer 2 · 2016-04-29T23:39:00

Probably some error with the Path, Check this similar post for CSS Image path References.

Just try this to find the issue,

Create a Folder called Test in your Desktop or some directory

Inside the Test Folder, Create another folder called Images and save the online image from the above url as "image.png"

Create an html file (test.html) inside the Test Folder,with the following content and save it, Later try to open the file in Web Browser. you could able to see the Image loaded from Local.

HTML

<html>
<head>    <style>
        body {
            background-image: url(Images/image.png);
        } </style>

    
</head>
<body>    
</body>
</html>

Css background image, I cannot change the online image to local image

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0