jQuery: Adding background image to div

[Anonymous]

Im trying to add the background-image source to a div using jquery.

The image path is stored in a variable that gets the value from an input field. So if the user types in the input field img/my-image.jpg, then I add the background-image style to the div like this

var imgSource = $("input").val();
$("div").css("background-image","url("+ imgSource +")");
<code></code>
<code></code>

The problem is that instead of the image source coming out exactly as the user typed, It comes out like this http://localhost/website/img/my-image.jpg

So if the user types the image path img/mountain.jpg, instead of the source being added exactly like that, its instead added like this.

http://localhost/website/img/mountain.jpg
How can i have the background image path that the user entered be exactly what its added and not start from localhost?

[Paulie_D]

I think you are probably looking for a string rather than a value?

[Paulie_D]

I am curious as what this is supposed to do. Are you choosing from a predefined list of images you host yourself…if so, why does the user need to type in the address?

If not, how are you planning on getting the image onto your server?

[Anonymous]

This is not server-based.
The user enters the image path in an input field for example “img/mountain.jpg”.
That image path is added like this

var imgPath = $("input").val();
$("div").css("background-image","url("+ imgPath +")";
<code></code>

Instead of it looking like this
background-image: url(img/mountain.jpg);

It looks like this
'background-image: url(http://localhost/img/mountain.jpg)'

[Paulie_D]

I’m confused…..who has this image?

You? If so, again, why does the user need to type the address?

The user? If so, it won’t display without being uploaded to your server.

Online Resource? Then it would be the whole http path and would probably work.

[Anonymous]

This isn’t online. The user has the image in their file directory, they are linking to it with an image path that will show the image once the html page is downloaded and placed in the folder, and opened.

[__]

@htmlcinco, you misunderstand. when you specify a URL in a browser (e.g., the url of an image), that path is resolved in one of several ways:

1. if the URL starts with a protocol (e.g., “http://”), then it is considered “absolute” and the browser will look up the URL literally. As an example, http://example.com/img/mountain.jpg will always ask example.com for “/img/mountain.jpg”.
2. otherwise, the URL is considered “relative.” There are many things that might affect how it is resolved, but among other things, the browser will add the protocol, hostname, and/or current path to the URL.

For example,img/mountain.jpg is a relative path; it cannot be resolved on its own. In order to make sense of it, the browser will:
– add the current url path:
/img/mountain.jpg
– add the current hostname:
localhost/img/mountain.jpg
– add the current protocol:
http://localhost/img/mountain.jpg

This is how URLs are resolved. If you don’t want to look for the image on localhost, then you need to specify where to look explicitly.

[Anonymous]

My solution would be adding the path of the background image exactly as its being typed with nothing being added to it. I can’t explain everything because It will just make it harder to understand.

[Paulie_D]

From what I can gather the user will, at the end of the process, download a set of files (presumably in a folder [and sub-folders?] which will include, at the very least an HTML file, a CSS file (and perhaps a JS file).

The CSS file is to be pre-written but updated to use a user-specified image at a certain point.

That being the case, I’m not sure how you would parse the correct URL/path without knowing the user’s folder structure.

Therefore, it would, to me, make more sense to use a literal string of /img/myimage.jpg and require the user to place the designated image in the right folder once the download has completed.

Or is that too easy?

I don’t think there is any way to do this as a “one path fits all” way otherwise.

[Anonymous]

The user is the one that knows the folder structure. So if the user places the image inside a folder named “pool”, then the user will add the path as “pool/image.jpg”. Isn’t it already retrieving a string from the input field using the method I posted above?

[Paulie_D]

The user is the one that knows the folder structure

He might know where it is on his PC but that may not necessarily relate to the downloaded files/folder.

[Author]

Posts