jquery css background url

Содержание

1. Answer: Use the jQuery CSS() Method
2. Example
3. Related FAQ
4. 11 Answers 11
5. 1. Basic Setup
6. 1.1 Initial Document Setup
7. 1.2 Understanding the .css() method
8. 2. Background Image using .css()
9. 3. Conclusion

Answer: Use the jQuery CSS() Method

To set the CSS background-image property of an element using the jQuery CSS() method, you need to specify the complete property value using the url() functional notation.

For example, if you’ve an image URL stored in a JavaScript variable then in CSS() method you need to set the value something like this to make it work:

Example

Related FAQ

Here are some more FAQ related to this topic:

I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:

This seems to be not working, as:

Any idea, what I am doing wrong?

11 Answers 11

You probably want this (to make it like a normal CSS background-image declaration):

You’ll want to include double quotes («) before and after the imageUrl like this:

This way, if the image has spaces it will still be set as a property.

Alternatively to what the others are correctly suggesting, I find it easier usually to toggle CSS classes, instead of individual CSS settings (especially background image URLs). For example:

Here is my code:

Further to the other answers, you can also use «background». This is particularly useful when you want to set other properties relating to the way the image is used by the background, such as:

For those using an actual URL and not a variable:

Try modifying the «style» attribute:

String interpolation to the rescue.

The problem I was having, is that I kept adding a semi-colon ; at the end of the url() value, which prevented the code from working.

NOT WORKING CODE:

WORKING CODE:

Notice the omitted semi-colon ; at the end in the working code. I simply didn’t know the correct syntax, and it’s really hard to notice it. Hopefully this helps someone else in the same boat.

Posted by: Fabio Cimo in jQuery September 4th, 2015 0 Views

In this example, we’ll learn how to use jQuery to add CSS properties to HTML elements and specifically how to add backgrounds like colors or images using the .css() method.

The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain properties.

For example, Internet Explorer’s DOM implementation refers to the float property as styleFloat , while W3C standards-compliant browsers refer to it as cssFloat . For consistency, you can simply use “ float “, and jQuery will translate it to the correct value for each browser.

1. Basic Setup

1.1 Initial Document Setup

To begin, create a new HTML document and add the following sections and links:

1.2 Understanding the .css() method

.css( propertyName ) – Get the computed style properties for the first element in the set of matched elements.
propertyName will be a string containing the name of a CSS property. Look at the following example:

Using .css() – Single Property

But you can use the .css() method with multiple properties inside: .css( propertyNames ) where propertyNames would represent an array of one or more CSS properties. Modifying the example above, we’d get:

Using .css() – Multiple Properties

2. Background Image using .css()

Now let’s try to add a background color and then a background image in a content box. The easiest way to do this is to refer to the element you want to give a background color and then use .css(‘background-color’, ‘#eee’) like so:

jQuery Background Image

In a similar manner, we can use the syntax .css(‘background-image’, ‘url(image.jpg)’) to add a background image like so:

jQuery Background Image

You can choose to show the background image we just set with jQuery only on click. You can do that like this:

The result would be:

Trigger Background Image on Click

3. Conclusion

To conclude, changing the background of an element with jQuery becomes really useful and necessary when you want to trigger these events on certain actions taken by the user or when you want to create functions to manipulate the background for some reason like animation ect. At all times, keep in mind the basic syntax of .css() method as it is an essential jQuery method to be used to set or change CSS properties.

Источник: computermaker.info