Target an image 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 !

Источник

Targeting a Specific Image Type with CSS

S o So I’m coding up a new site from our designer and he’s set some nice quasi-polaroid photo effects: white border, box-shadow, etc. This looks great on rectangular images, of course, but not so much on other images with transparency.

One quick fix is to set the background to the same color as the border. That fixes the lonely frame problem and puts the transparent image on “card” of sorts. It’s a step in the right direction:

My old workaround was to ask our content specialist to add the class “no-border” to any image that was transparent and thus shouldn’t have the border effect. That was less than ideal, however. WordPress doesn’t make it super-easy to add classes to images, so this would put extra work on him, require new training for anyone else who touches content, and provide an extra avenue for operator error. What I really needed was a way to target the transparent images via CSS without adding anything to them in the CMS.

Today it hit me that I could use an attribute selector to find any PNG and remove the border, shadow, and background from it. Attribute selectors are good to go on IE 7+ and all real browsers. It’s a pretty safe bet that the only image with transparency would be a PNG (if for some reason you’re still using GIFs, though, just modify this code to include them) and that the normal rectangular photo images would be JPGs. Here’s the code I use to target them (of course, choose your own border / box-shadow and do your own prefixing):

img < border: border; background: border-color; box-shadow: box-shadow; > img[src*="png"] < border: none; background: transparent; box-shadow: none; > 

Now, as you can see below, the JPG photo image has the correct border / box-shadow, while the PNG displays in all its transparent, frame-less glory.

Of course, there is a possibility that someone might upload a rectangular photo formatted as PNG, but in my opinion, that’s a good opportunity to teach them about file formats. Other than education, any ideas on how to improve this snippet to cover non-transparent PNGs?

Источник

A simple image gallery using only CSS and the :target selector

Back in the old days of web development and when CSS2 got support I always cringed at “CSS only” demos as a lot of them were hacky to say the least. With CSS growing up and having real interaction features it seems to me though that it is time to reconsider as – when you think about it – visual effects and interactivity should be maintained in the CSS rather than in JavaScript and CSS.

With the support we have in new browsers it would be a waste not to use what has been put in. If you have to give all the visual candy to IE6, OK, then you’d have to use a library like jQuery for your effects. But you can have your cake and eat it if you don’t give the shiny to the old browsers out there, but give them a simpler interface and make sure they don’t get what they don’t understand.

So today let’s take a look at an image gallery using the target selector. This has been done before (lightbox example, thumbnail preview example) but I thought it’d be good to explain the details of what is going on.

So here is a screencast of our “CSS only image gallery” in action and you can see it for yourself.

Starting with HTML

We start with HTML that works across all browsers (except for IE

About Chris Heilmann

Evangelist for HTML5 and open web. Let’s fix this!

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

9 comments

Hi.
You can avoid the jump to the target using a display:none element and the general sibling selector (~) Here is a demo (in french): http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target Vincent.

Amazing, neat markup and works very well. And i liked this bit: “This works, and should be more than enough for the IE6 users out there.” Well said! They can’t appreciate cool stuff anyway so let em scroll!

But don’t forget that Firefox does decode and keep in memory all images on the page even those that aren’t visible. Keep this in mind before stuffing 100 large images in this gallery. Other browsers do this better. There is a bug on bugzilla for this if you are interested. (P.S. please fix the captcha text below, it does not have the character encoding specified properly so it shows diacritical characters wrongly (it seems the captcha instructions are localized for each visitor). I get “Mus�me sa uisti?, ?e ste ?lovek. Vyrie?te zadanie ni??ie a kliknite na tla?idlo Som ?lovek. Z�skate tak k�d potvrdenia. Ak chcete tento proces v bud�cnosti zjednodu?i?, odpor�?ame v�m povoli? jazyk JavaScript.”).

Positioning the hidden images JUST off-screen will still make them available to assistive technologies (ie screen readers) while not visually displayed. Consider toggling between display: none & display: block

Yet this means that if you look through an image gallery and would like to return to the place before, you will need to either click back (or hit backslash) several times or click it for a long time, waiting for the dropdown, instead of clicking back once to return.

Thank you for sharing your knowledge with us! I did not know about the “:target” pseudo selector, but this article is a good starting point. Kind regards
Jakob

Comments are closed for this article.

Except where otherwise noted, content on this site is licensed under the Creative Commons Attribution Share-Alike License v3.0 or any later version.

Источник