CSS set background-image by data-image attr - html

I have sort of elements with this pattern:
<div data-image="{imageurl}" ...></div>
I want to set this elements background-image to data-image. I test this CSS code:
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
border show correctly but nothing happened for background
How can do I fix this code only with css (not js or jq)?

a nice alternative to data- attributes (or the attr() approach in general) can be the use of custom properties (MDN, csswg, css-tricks).
as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!
also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.
.kitten {
width: 525px;
height: 252px;
background-image: var(--bg-image);
}
<div class="kitten"
style="--bg-image: url('http://placekitten.com/525/252');">
</div>

As of writing, the browser support of attr() notation on CSS properties other than content - like background-image - is very limited.
Besides, as per CSS level 2 spec, combining url() and attr() is not valid:
content: url(attr(data-image));.
Hence there is no cross-browser CSS solution at the moment to achieve the desired result. Unless using JavaScript is an option:
var list = document.querySelectorAll("div[data-image]");
for (var i = 0; i < list.length; i++) {
var url = list[i].getAttribute('data-image');
list[i].style.backgroundImage="url('" + url + "')";
}
div[data-image] {
width: 100px; height: 100px; /* If needed */
border: 2px solid black;
}
<div data-image="http://placehold.it/100"></div>

In your HTML:
<div data-image="path_to_image/image_file.extension" ... ></div>
In your CSS:
div:after {
background-image : attr(data-image url);
/* other CSS styling */
}
Problems:
This is your required answer. Check this documentation in w3.org. But the main problem is it won't work, not yet!. In many browsers, attr() runs successfully when it is used in content: attribute of the CSS coding. But using it in other attributes of CSS, it doesn't work as expected, not even in major browsers.
Solution:
Use scripts such as JavaScript or jQuery.
References:
W3C attr()
MDN attr()
Thanks:
Hashem Qolami for correcting my syntax. :)

If the goal is being able to set the background-image style of an HTML element from within the HTML document rather than the CSS definition, why not use the inline style attribute of the HTML element?
div[style^='background-image'] {
width:400px;
height:225px;
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
/* background-image is not set here... */
}
<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>
EDIT:
If selecting the <div> by style is not an option, you may be able to give it a class and select it by class name.

Related

Using CSS for Image Content? [duplicate]

Is it possible to set the src attribute value in CSS?
In most cases, we use it like this:
<img src="pathTo/myImage.jpg" />
and I want it to be something like this
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
I want to know if there is a way doing it without using the background or background-image properties in CSS.
Use content:url("image.jpg").
Full working solution (Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>
Tested and working:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Firefox 100 & newer
Tested and Not working:
FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
Internet Explorer 11.0.9600.17905 (URL never loads)
There is a solution that I found out today (works in IE6+, FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
How it works:
The image is shrunk until no longer visible by the width & height.
Then, you need to 'reset' the image size with padding. This
one gives a 16x16 image. Of course you can use padding-left /
padding-top to make rectangular images.
Finally, the new image is put there using background.
If the new background image is too large or too small, I recommend using background-size for example: background-size:cover; which fits your image into the allotted space.
It also works for submit-input-images, they stay clickable.
See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss
Enjoy!
A collection of possible methods to set images from CSS
CSS2's :after pseudo-element or the newer syntax ::after from CSS3 along with the content: property:
First W3C Recommendation: Cascading Style Sheets, level 2
CSS2 Specification 12 May 1998
Latest W3C Recommendation: Selectors Level 3
W3C Recommendation 29 September 2011
This method appends content just after an element's document tree content.
Note: some browsers experimentally render the content property directly over some element selectors disregarding even the latest W3C recommendation that defines:
Applies to: :before and :after pseudo-elements
CSS2 syntax (forward-compatible):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 Selector:
.myClass::after {
content: url("somepicture.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
but even at the time of this writing, behaviour with a <IMG> tag is still not defined and although it can be used in a hacked and non standards compliant way, usage with <img> is not recommended!
Great candidate method, see conclusions...
**CSS1**'s [`background-image:`](http://www.w3.org/TR/REC-CSS1-961217#background-image) property:
First W3C Recommendation: Cascading Style Sheets, level 1 17 Dec 1996
This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.
This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention.
Default rendering: Original Size (cannot be scaled, only positioned)
However,
CSS3's background-size: property improved on it by allowing multiple scaling options:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
But even with this property, it depends on container size.
Still a good candidate method, see conclusions...
CSS2's list-style: property along with display: list-item:
First W3C Recommendation: Cascading Style Sheets, level 2
CSS2 Specification 12 May 1998
list-style-image: property sets the image that will be used as the list item marker (bullet)
The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number)
display: list-item — This value causes an element (e.g., <li> in HTML) to generate a principal block box and a marker box.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Shorthand CSS: (<list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
Restrictions:
-
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position
This method is also not suitable for the <img> tag as the conversion cannot be made between element types, and here's the limited, non compliant hack that doesn't work on Chrome.
Good candidate method, see conclusions...
CSS3's border-image: property recommendation:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
A background-type method that relies on specifying sizes in a rather peculiar manner (not defined for this use case) and fallback border properties so far (eg. border: solid):
Note that, even though they never cause a scrolling mechanism, outset
images may still be clipped by an ancestor or by the viewport.
This example illustrates the image being composed only as a bottom-right corner decoration:
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Applies to: All elements, except internal table elements when border-collapse: collapse
Still it can't change an <img>'s tag src (but here's a hack), instead we can decorate it:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
Good candidate method to be considered after standards propagate.
CSS3's element() notation working draft is worth a mention also:
Note: The element() function only reproduces the appearance of the referenced element, not the actual content and its structure.
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
We'll use the rendered contents of one of the two hidden images to change the image background in #img1 based on the ID Selector via CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Notes: It's experimental and only works with the -moz prefix in Firefox and only over background or background-image properties, also needs sizes specified.
element() Live Demo
Conclusions
Any semantic content or structural information goes in HTML.
Styling and presentational information goes in CSS.
For SEO purposes, don't hide meaningful images in CSS.
Background graphics are usually disabled when printing.
Custom tags could be used and styled from CSS, but primitive versions of Internet Explorer do not understand](IE not styling HTML5 tags (with shiv)) without Javascript or CSS guidance.
SPA's (Single Page Applications), by design, usually incorporate images in the background
Having said that, let's explore HTML tags fit for image display:
The <li> element [HTML4.01+]
Perfect usecase of the list-style-image with display: list-item method.
The <li> element, can be empty, allows flow content and it's even permitted to omit the </li> end tag.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
Limitations: hard to style (width: or float: might help)
The <figure> element [HTML5+]
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
The element is valid with no content, but is recommended to contain a <figcaption>.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
Default rendering: the element is right aligned, with both left and right padding!
FIGURE Live Demo
The <object> element [HTML4+]
To include images, authors may use the OBJECT element or the IMG element.
The data attribute is required and can have a valid MIME type as a value!
<object data="data:x-image/x,"></object>
Note: a trick to make use of the <object> tag from CSS would be to set a custom valid MimeType x-image/x followed by no data (value has no data after the required comma ,)
Default rendering: 300 x 150px, but size can be specified either in HTML or CSS.
OBJECT Live Demo
The <SVG> tag
Needs a SVG capable browser and has a <image> element for raster images
SVG Live Demo
The <canvas> element [HTML5+].
The width attribute defaults to 300, and the height attribute defaults to 150.
CANVAS Live Demo
The <input> element with type="image"
Limitations:
... the element is expected to appear button-like to indicate that the element is a button.
which Chrome follows and renders a 4x4px empty square when no text
Partial solution, set value=" ":
<input type="image" id="img1" value=" ">
INPUT type=image Live Demo
Also watch out for the upcoming <picture> element in HTML5.1, currently a working draft.
i used the empty div solution, with this CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
<div id="throbber"></div>
I found a better way than the proposed solutions, but it does use the background-image indeed.
Compliant method (cannot confirm for IE6)
Credits: http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
The CSS:
img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5's bad box model */
height /**/:20px;
}
The old image is not seen and the new is seen as expected.
The following neat solution only works for webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
create a 1x1 transparent gif or png.
Assign propery "src" of IMG to that image.
Define final presentation with "background-image" in the CSS style.
It works like a charm :)
Here is a very good solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro(s) and Con(s):
(+) works with vector image that have relative width/height (a thing that RobAu's answer does not handle)
(+) is cross browser (works also for IE8+)
(+) it only uses CSS. So no need to modify the img src (or if you do not have access/do not want to change the already existing img src attribute).
(-) sorry, it does use the background css attribute :)
No you can't set the image src attribute via CSS. The closest you can get is, as you say, background or background-image. I wouldn't recommend doing that anyway as it would be somewhat illogical.
However, there is a CSS3 solution available to you, if the browsers you're targeting are able to use it. Use content:url as described in Pacerier's answer. You can find other, cross-browser solutions in the other answers below.
You can define 2 images in your HTML code and use display: none; to decide which one will be visible.
Put several images in a "controlling" container, and change the container's class instead. In CSS, add rules to manage images' visibility depending on the container's class. This will produce the same effect as changing img src property of a a single image.
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
Note that it will preload all images, like with CSS backround-images, but unlike changing img src via JS.
Some data I would leave in HTML, but it is better to define the src in CSS:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
Or you could do this which I found on the interweb thingy.
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an IMG tag with alt text and a background that can scale without using JavaScript?
In a project I'm working on now I created a hero block twig template
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Alternative way
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
As far as I am aware of, YOU CANNOT. CSS is about style and image's src is content.
To reiterate a prior solution and to stress the pure CSS implementation here is my answer.
A Pure CSS solution is needed in cases where you are sourcing content from another site, and thus you have no control over the HTML that is delivered. In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from. Therefore, I'm removing their logo while keeping everything else. I should note that this is within my client's contract to do so.
{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
I know this is a really old question however no answers provide the proper reasoning for why this can never be done. While you can "do" what you are looking for you cannot do it in a valid way. In order to have a valid img tag it must have the src and alt attributes.
So any of the answers giving a way to do this with an img tag that does not use the src attribute are promoting use of invalid code.
In short: what you are looking for cannot be done legally within the structure of the syntax.
Source: W3 Validator
If you don't want to set a background property then you can't set the src attribute of an image using only CSS.
Alternatively you can use JavaScript to do such a thing.
Using CSS, it can't be done. But, if you are using JQuery, something like this will do the trick:
$("img.myClass").attr("src", "http://somwhere");
You can convert it with JS:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
If you are trying to add an image in a button dynamically based on the context of your project, you can use the ? take to reference the source based on an outcome. Here I am using mvvm design to let my Model.Phases[0] value determine whether I want my button to be populated with images of a lightbulb on or off based on the value of the light phase.
Not sure if this helps. I'm using JqueryUI, Blueprint, and CSS. The class definition should allow you to style the button based on whatever you'd like.
<button>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
I would add this: background image could be also positioned with background-position: x y; (x horizontal y vertical). (..)
My case, CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)
HTMl Code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don't want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
Css Code:
span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* 'new background!!!' */);
}
I've been studying html after school for a few days, and wanted to know how to do this. Found out the background and then put 2 and 2 together.
This works 100% I checked, if not make sure you fill in necessary things!!!
We need to specify height, because without it there would be nothing!!!
I'll leave this basic shell you can add-on.
Example:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-#-2011-01-11-191526-300x225.png");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}
P.S. Yes I am a Linux user ;)
Any method based on background or background-image is likely to fail when user prints the document with "print background colors and images" disabled.
Which is unfortunately typical browser's default.
The only print-friendly and cross-browser compatible method here is the one proposed by Bronx.
Just use HTML5 :)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>

Change image size within a division

I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}

how to change the background of a css-class by hover a button?

I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery

css - how to change image source by its id?

Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Is it possible to set the src attribute value in CSS?
In most cases, we use it like this:
<img src="pathTo/myImage.jpg" />
and I want it to be something like this
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
I want to know if there is a way doing it without using the background or background-image properties in CSS.
Use content:url("image.jpg").
Full working solution (Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>
Tested and working:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Firefox 100 & newer
Tested and Not working:
FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
Internet Explorer 11.0.9600.17905 (URL never loads)
There is a solution that I found out today (works in IE6+, FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
How it works:
The image is shrunk until no longer visible by the width & height.
Then, you need to 'reset' the image size with padding. This
one gives a 16x16 image. Of course you can use padding-left /
padding-top to make rectangular images.
Finally, the new image is put there using background.
If the new background image is too large or too small, I recommend using background-size for example: background-size:cover; which fits your image into the allotted space.
It also works for submit-input-images, they stay clickable.
See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss
Enjoy!
A collection of possible methods to set images from CSS
CSS2's :after pseudo-element or the newer syntax ::after from CSS3 along with the content: property:
First W3C Recommendation: Cascading Style Sheets, level 2
CSS2 Specification 12 May 1998
Latest W3C Recommendation: Selectors Level 3
W3C Recommendation 29 September 2011
This method appends content just after an element's document tree content.
Note: some browsers experimentally render the content property directly over some element selectors disregarding even the latest W3C recommendation that defines:
Applies to: :before and :after pseudo-elements
CSS2 syntax (forward-compatible):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 Selector:
.myClass::after {
content: url("somepicture.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
but even at the time of this writing, behaviour with a <IMG> tag is still not defined and although it can be used in a hacked and non standards compliant way, usage with <img> is not recommended!
Great candidate method, see conclusions...
**CSS1**'s [`background-image:`](http://www.w3.org/TR/REC-CSS1-961217#background-image) property:
First W3C Recommendation: Cascading Style Sheets, level 1 17 Dec 1996
This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.
This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention.
Default rendering: Original Size (cannot be scaled, only positioned)
However,
CSS3's background-size: property improved on it by allowing multiple scaling options:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
But even with this property, it depends on container size.
Still a good candidate method, see conclusions...
CSS2's list-style: property along with display: list-item:
First W3C Recommendation: Cascading Style Sheets, level 2
CSS2 Specification 12 May 1998
list-style-image: property sets the image that will be used as the list item marker (bullet)
The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number)
display: list-item — This value causes an element (e.g., <li> in HTML) to generate a principal block box and a marker box.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Shorthand CSS: (<list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
Restrictions:
-
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position
This method is also not suitable for the <img> tag as the conversion cannot be made between element types, and here's the limited, non compliant hack that doesn't work on Chrome.
Good candidate method, see conclusions...
CSS3's border-image: property recommendation:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
A background-type method that relies on specifying sizes in a rather peculiar manner (not defined for this use case) and fallback border properties so far (eg. border: solid):
Note that, even though they never cause a scrolling mechanism, outset
images may still be clipped by an ancestor or by the viewport.
This example illustrates the image being composed only as a bottom-right corner decoration:
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Applies to: All elements, except internal table elements when border-collapse: collapse
Still it can't change an <img>'s tag src (but here's a hack), instead we can decorate it:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
Good candidate method to be considered after standards propagate.
CSS3's element() notation working draft is worth a mention also:
Note: The element() function only reproduces the appearance of the referenced element, not the actual content and its structure.
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
We'll use the rendered contents of one of the two hidden images to change the image background in #img1 based on the ID Selector via CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Notes: It's experimental and only works with the -moz prefix in Firefox and only over background or background-image properties, also needs sizes specified.
element() Live Demo
Conclusions
Any semantic content or structural information goes in HTML.
Styling and presentational information goes in CSS.
For SEO purposes, don't hide meaningful images in CSS.
Background graphics are usually disabled when printing.
Custom tags could be used and styled from CSS, but primitive versions of Internet Explorer do not understand](IE not styling HTML5 tags (with shiv)) without Javascript or CSS guidance.
SPA's (Single Page Applications), by design, usually incorporate images in the background
Having said that, let's explore HTML tags fit for image display:
The <li> element [HTML4.01+]
Perfect usecase of the list-style-image with display: list-item method.
The <li> element, can be empty, allows flow content and it's even permitted to omit the </li> end tag.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
Limitations: hard to style (width: or float: might help)
The <figure> element [HTML5+]
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
The element is valid with no content, but is recommended to contain a <figcaption>.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
Default rendering: the element is right aligned, with both left and right padding!
FIGURE Live Demo
The <object> element [HTML4+]
To include images, authors may use the OBJECT element or the IMG element.
The data attribute is required and can have a valid MIME type as a value!
<object data="data:x-image/x,"></object>
Note: a trick to make use of the <object> tag from CSS would be to set a custom valid MimeType x-image/x followed by no data (value has no data after the required comma ,)
Default rendering: 300 x 150px, but size can be specified either in HTML or CSS.
OBJECT Live Demo
The <SVG> tag
Needs a SVG capable browser and has a <image> element for raster images
SVG Live Demo
The <canvas> element [HTML5+].
The width attribute defaults to 300, and the height attribute defaults to 150.
CANVAS Live Demo
The <input> element with type="image"
Limitations:
... the element is expected to appear button-like to indicate that the element is a button.
which Chrome follows and renders a 4x4px empty square when no text
Partial solution, set value=" ":
<input type="image" id="img1" value=" ">
INPUT type=image Live Demo
Also watch out for the upcoming <picture> element in HTML5.1, currently a working draft.
i used the empty div solution, with this CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
<div id="throbber"></div>
I found a better way than the proposed solutions, but it does use the background-image indeed.
Compliant method (cannot confirm for IE6)
Credits: http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
The CSS:
img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5's bad box model */
height /**/:20px;
}
The old image is not seen and the new is seen as expected.
The following neat solution only works for webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
create a 1x1 transparent gif or png.
Assign propery "src" of IMG to that image.
Define final presentation with "background-image" in the CSS style.
It works like a charm :)
Here is a very good solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro(s) and Con(s):
(+) works with vector image that have relative width/height (a thing that RobAu's answer does not handle)
(+) is cross browser (works also for IE8+)
(+) it only uses CSS. So no need to modify the img src (or if you do not have access/do not want to change the already existing img src attribute).
(-) sorry, it does use the background css attribute :)
No you can't set the image src attribute via CSS. The closest you can get is, as you say, background or background-image. I wouldn't recommend doing that anyway as it would be somewhat illogical.
However, there is a CSS3 solution available to you, if the browsers you're targeting are able to use it. Use content:url as described in Pacerier's answer. You can find other, cross-browser solutions in the other answers below.
You can define 2 images in your HTML code and use display: none; to decide which one will be visible.
Put several images in a "controlling" container, and change the container's class instead. In CSS, add rules to manage images' visibility depending on the container's class. This will produce the same effect as changing img src property of a a single image.
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
Note that it will preload all images, like with CSS backround-images, but unlike changing img src via JS.
Some data I would leave in HTML, but it is better to define the src in CSS:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
Or you could do this which I found on the interweb thingy.
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an IMG tag with alt text and a background that can scale without using JavaScript?
In a project I'm working on now I created a hero block twig template
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Alternative way
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
As far as I am aware of, YOU CANNOT. CSS is about style and image's src is content.
To reiterate a prior solution and to stress the pure CSS implementation here is my answer.
A Pure CSS solution is needed in cases where you are sourcing content from another site, and thus you have no control over the HTML that is delivered. In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from. Therefore, I'm removing their logo while keeping everything else. I should note that this is within my client's contract to do so.
{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
I know this is a really old question however no answers provide the proper reasoning for why this can never be done. While you can "do" what you are looking for you cannot do it in a valid way. In order to have a valid img tag it must have the src and alt attributes.
So any of the answers giving a way to do this with an img tag that does not use the src attribute are promoting use of invalid code.
In short: what you are looking for cannot be done legally within the structure of the syntax.
Source: W3 Validator
If you don't want to set a background property then you can't set the src attribute of an image using only CSS.
Alternatively you can use JavaScript to do such a thing.
Using CSS, it can't be done. But, if you are using JQuery, something like this will do the trick:
$("img.myClass").attr("src", "http://somwhere");
You can convert it with JS:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
If you are trying to add an image in a button dynamically based on the context of your project, you can use the ? take to reference the source based on an outcome. Here I am using mvvm design to let my Model.Phases[0] value determine whether I want my button to be populated with images of a lightbulb on or off based on the value of the light phase.
Not sure if this helps. I'm using JqueryUI, Blueprint, and CSS. The class definition should allow you to style the button based on whatever you'd like.
<button>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="#(Model.Phases[0] ? "light-on": "light-off")" src="#(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
I would add this: background image could be also positioned with background-position: x y; (x horizontal y vertical). (..)
My case, CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)
HTMl Code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don't want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
Css Code:
span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* 'new background!!!' */);
}
I've been studying html after school for a few days, and wanted to know how to do this. Found out the background and then put 2 and 2 together.
This works 100% I checked, if not make sure you fill in necessary things!!!
We need to specify height, because without it there would be nothing!!!
I'll leave this basic shell you can add-on.
Example:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-#-2011-01-11-191526-300x225.png");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}
P.S. Yes I am a Linux user ;)
Any method based on background or background-image is likely to fail when user prints the document with "print background colors and images" disabled.
Which is unfortunately typical browser's default.
The only print-friendly and cross-browser compatible method here is the one proposed by Bronx.
Just use HTML5 :)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>