Changing image src in css

How to Set img src using CSS

I needed a way to set the src attribute of my img tags using CSS.

I didn’t want to define the path in HTML.

1. Using content: url

A quick, not very cross-compatible solution is to drop the src attribute and use content:url() in CSS.

img < content: url("/path/to/image.png"); > 

This is known to have issues in FireFox and IE, but it is much cleaner than this next solution.

2. Using background-image and padding

Instead of dropping the src tag, we can use it to target that img element in our styles (we can also target the img using a class or id ).

Let’s say our newimage.png has width x height dimensions of 200px x 100px .

We can set the background-image to be the new image and push the inline image out of the way using padding.

img[src*="/path/to/image.png"] < background: url("/path/to/newimage.png") no-repeat; width: 200px; /* Width of new image */ height: 0px !important; height /**/: 100px; /* Height of new image */ padding: 100px 0 0 0; /* Height of new image */ > 

Here, we’ll need to manually specify width and height .

Additionally, we accomodate for IE versions that mishandle the box model ( height /**/ ). Some code formatters will remove the space between height and /**/ , which is needed, so ensure that the space is there after reformatting.

It may also be helpful to include box-sizing: border-box; in order to force padding and borders into the total width.

Источник

How to Set img src using CSS

Sometimes, you want to change the src attribute of an img without using HTML.

For example, going from this:

A solution

You can simulate having a src attribute by using the content attribute in CSS, and passing in the image path url() .

For example, if you want to simulate changing the src attribute of an img to /path/here/to/image.png , you can do this:

This can work in some cases, but it’s not recommended, especially because there is a better solution.

A better solution

A better way to add a src attribute to an img is to use CSS targeting to add a background-image . The caveat here is that you need to know and provide the image’s dimensions.

Here’s how to target the img and add a background-image , with an image of dimensions 20rem by 10rem :

Once you do that, you should see the image in the browser, all without changing the src attribute.

Conclusion

If you don’t want to change the src attribute of an img to a different image using HTML, you have two solutions to get the image to display in the browser using CSS.

Hopefully, this post has given you a solution that works for your needs. Happy coding!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник

Modifying the CSS image src: A guide to changing image sources

Solution 3: Here is a useful method to learn about unnoticed CSS selectors. In addition, there are other selectors that you can explore. For instance, there are various selectors available for different range of elements. You can even conditionally select elements using this technique. A good reference for advanced selectors can be found on W3.org. Solution 1: It is not possible to achieve this using CSS alone; JavaScript is required. Solution 2: CSS alone cannot accomplish this task; it is necessary to use client-side scripting like JavaScript. However, if you have a background image for an element and want to change it on hover, you can certainly write CSS code for that. Solution 3: To modify the CSS of an image, you can make use of this approach.

Replace image src location using CSS

You can use a background image

 
  
 
Original Image: 
 

Here is another dirty hack 🙂

.application-title > img < display: none; >.application-title::before < content: url(path/example.jpg); >

you can use: content:url(«image.jpg»)

Change img src on hover, When you do the CSS you just have to apply a hover state to the anchor and because of fontello it will change that colour too by just using the

How to change the image source attribute using Javascript

Lesson Code:: http://tiny.cc/h0bl2y or http://tiny.cc/xgcn2yIn this example JavaScript changes
Duration: 18:48

Change Image SRC on mouseover Using Html CSS And Javascript

Please LIKE our Facebook page for daily updateshttps://www.facebook.com/Online-Tutorial
Duration: 3:37

Define an ‘s src attribute in CSS [duplicate]

The use of an img tag is simply a content element.

No, there is no option available for that. You do have the ability to set a background image, although this differs from what you are asking for.

How to replace src img when clicking (html/css or JS), You can use a simple JS function for that. First of all, add the onclick=»changeImage(this);» to every img tag you want to handle it’s click

Replace src of Image tag using css property

You can use content:url(«image.jpg»)

For information about the CSS content property, you can visit the following URL: https://developer.mozilla.org/en-US/docs/Web/CSS/content.

If you cannot modify HTML,

Although I haven’t tried it yet, I am unsure if the inline attribute src will outweigh the CSS content .

If you already have the src for your img element, thanks to @pol, it should function properly.

The values of HTML attributes cannot be altered using CSS; instead, JavaScript is required.

CSS offers the ability to conceal the image and replace it with a background.

 
Changed img:
 
 

It is a great opportunity to gain knowledge about CSS and discover lesser-known selectors.

In addition, you can find more information about various selectors.

Additionally, there are various appealing selectors available for a wide variety of elements.

:active :after :before :first-child :first-letter :first-line :focus :hover :lang :link :visited 

It is also possible to make conditional selections in this manner.

The source for this information is the Advanced Selectors section on W3.org.

Is it possible to change img src by hover on another element by CSS, If you cannot update the HTML, you’ll be forced to rely on a JavaScript solution. This can be done by first selecting the image with

Can I change img src in css dynamically?

CSS does not have the capability to perform that action, but it can be accomplished using JavaScript.

If the image were not presented as an element, but instead as the background-image of another element, you could accomplish this by modifying the CSS property (for example). «»».

To achieve that, CSS alone is insufficient; client side scripting, like JavaScript, must be utilized.

document.getElementById("my_id").src="https://code911.top/howto/URL"; 

In the case where you have a background image for an element and want to modify it upon hover, you can definitely create a code snippet like the following.

To modify the CSS of an image, JavaScript must be used. Therefore, the src of the image can be altered using JavaScript.

Change HTML image source in a div with javascript when click on, The way you wrote your code, your are trying to change the src of the div. To fix that, find the the element img correctly using the same

Источник

How to Set Image Source through CSS: Alternative Solutions and Methods

Learn how to set image source through CSS with alternative solutions and methods. Explore using CSS targeting, transparent gifs, javascript, @font-face rule, and more. Choose the right method for your needs.

• It is not possible to set the image src attribute via CSS
• Using CSS targeting to add a background-image
• Quick Tutorial — How to Use Images in HTML
• Creating a transparent gif or png
• Changing inline image src/url with javascript
• Simulating the src attribute with CSS content attribute
• Using the @font-face rule in CSS
• Using the CSS background-image property
• Advantages of using img tag
• Other simple code samples for setting image source through CSS
• Conclusion
• How to set img src in CSS?
• Can we use IMG tag in CSS?
• How to use src in CSS?
• How to change image with CSS?

The img tag is a fundamental element of HTML that allows developers to embed images into web pages. However, have you ever wondered if it is possible to set the equivalent of a src attribute of an img tag in CSS? In this article, we will explore this topic and provide alternative solutions and methods for setting image sources through CSS.

It is not possible to set the image src attribute via CSS

It is not possible to set the image src attribute via CSS. The src attribute is a part of the HTML img tag, and it is used to specify the URL of the image that needs to be displayed. CSS, on the other hand, is used for styling and layout purposes and does not have the ability to specify image URLs.

Here’s an example of code that demonstrates this:

This code will not work because the src attribute is not a valid CSS property. However, there is an alternative solution for this problem.

One workaround is to use CSS targeting to add a background-image.

Using CSS targeting to add a background-image

With CSS targeting, you can use the background-image property to specify an image URL. Here’s an example of how to use this method:

This code will add an image to a div element. However, this method has some disadvantages. For example, it may be difficult to position the image correctly, and it may not work as expected on different screen sizes.

Quick Tutorial — How to Use Images in HTML

Quick Tutorial — How to Use Images in HTML — img src. 13K views 5 years ago How To Create Duration: 5:56

Creating a transparent gif or png

Another alternative solution is to create a 1×1 transparent gif or png and assign a property “src” of IMG in CSS. Here’s an example of how to use this method:

This method allows you to specify an image in CSS, but it has some disadvantages as well. For example, it does not work well with responsive design, and it may not be the best solution for larger images.

Changing inline image src/url with javascript

If you want to change an inline image src/url, you need to use javascript. Here’s an example of how to use this method:

document.getElementById("myImg").src = "newimage.png"; 

This method allows you to change an image on the fly, but it requires javascript, which may be a disadvantage if you want to avoid using javascript.

Simulating the src attribute with CSS content attribute

Another alternative solution is to use the content attribute in CSS to simulate having a src attribute by passing in the image path url(), but it’s not recommended. Here’s an example of how to use this method:

This method is not recommended because it can cause issues with accessibility and may not work well on different browsers.

Using the @font-face rule in CSS

The @font-face rule in CSS uses the src descriptor to specify the resource containing font data. Here’s an example of how to use this method:

This method allows you to specify a font in CSS, but it is not an ideal solution for images.

Using the CSS background-image property

The CSS background-image property can be used in combination with the :hover pseudo-class to replace or change the image on mouseover. Here’s an example of how to use this method:

This method allows you to change an image on mouseover, but it may not be the best solution for all scenarios.

Advantages of using img tag

While there are alternative solutions for setting image sources through CSS, the img tag is still the best option if you need to resize the image. Here’s an example of how to use this method:

Using the img tag allows you to specify the width and height of the image, which can be useful for responsive design.

Other simple code samples for setting image source through CSS

In Css , in particular, how to add src of img tag in css code example

In Css , in particular, css img src code sample

In Javascript , in particular, change img src css

// You cannot do it with CSS alone // You can with JSelement.style.src = "someImage.jpg";// Or with jQuery $('some-element').attr('src', 'someImage.jpg');

Conclusion

In conclusion, while it is not possible to set the image src attribute via CSS, there are alternative solutions such as using CSS targeting to add a background-image, creating a transparent gif or png, using javascript to change the inline image src/url, simulating the src attribute with CSS content attribute, using the @font-face rule in CSS, using the CSS background-image property, and using an img tag for resizing the image. Each solution has its own advantages and disadvantages, so it’s important to choose the right one for your specific needs.

Источник