I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.
Related
pretty new to CSS and HTML and was hoping somebody could help me fix this. I wanted to be able to change the icon for the cursor although when I run the code, simply no change. A few visits to chatGPT hasnt done me much either. Here's my code:
body2 {
cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto;
}
And yes, it is 32x32.
I've tried moving it to different classes, changing words, changing everything. Although nothing has worked.
here is a good reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?retiredLocale=de
So basically you try to applie to a body2 HTML element you're CSS code. If its a class try the CSS selector .body2 {} or in the case its an id of a HTML element #body2 {}.
In you're css you've got one main picture and the second one as fallback. Just make sure you set the correct path corresponding to the location of you're CSS file.
To ensure that, you can also try the full path instead of the relativ one like C:\Users\xxx\Smile_icon_32x32.png
You are using the wrong css declaration, your code will only work if you have defined a custom html element having <body2> as tag.
What you probably want is:
body { ... }
applied to <body> tag
or a css class
.body { ... }
applied to or any other tag having body as class.
or a css id
#body { ... }
applied to or any other kind of tag with body as id.
Alternatively check in the browser console if the rule is applied and if the image path is resolved correctly.
Here is an example where http://example.com/32x32/990000/fff.png&text=PNG don't exist and https://dummyimage.com/32x32/009900/fff.gif&text=GIF exist so the gif will be used instead of the png :
.body2 {
display:inline-block;
cursor: url("http://example.com/32x32/990000/fff.png&text=PNG"),url("https://dummyimage.com/32x32/009900/fff.gif&text=GIF"), auto;
}
<div class="body2">display</div>
This is not a duplicate question because I am trying to override css of a external image with a href value.
I have this external image put all over a wordpress website but I cannot figure out a way to change image width with css.
The problem is I cannot alter the code here.The "wpd_wrapper" class is used on other places on the website as well.
I want to make the image width 110px
<div class="wpb_wrapper">
</div>
I have tried selecting the image with [attribute] like below. But it is not working. What Am I doing wrong here?
img[url*="badge_music-lrg.svg"] {
width: 110px !important;
}
It isn't an <img> so the img type selector won't match.
It doesn't have a url attribute, so your attribute selector which looks for url=something won't match.
Target something that is there. It is an <a> element and it has a style attribute.
I followed #Quentin's directions and came up with the answer
a[style*='badge_music-lrg.svg'] {
width: 110px !important;
}
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
DEMO LINK
As you can see on the link above I am trying to change the image when mouse hover but it's not working atm. What should I change? The parent <div> already has one hover on it.
.preview a img:hover{
background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');
}
You are trying to change the background-image css on an <img> tag.
This will not change the "src" attribute.
in order to do that, you will need a JavaScript solution.
using jQuery:
$(".preview a img").hover(function(){
$(this).attr("src","new-image.jpg")
});
EDIT: if you're using CSS3, and it's ok for you that not all browsers will support it, you can do:
.preview a img:hover{
content:url("new-image.jpg");
}
EDIT 2:
working fiddle - http://jsfiddle.net/j3xDR/
EDIT 3:
due to requests that it will work via a parent div, here is a full example with both options:
http://jsfiddle.net/j3xDR/1/
As Shay Elkayam's answer suggested, you can use the content property in modern browsers to achieve this.
If browser support is a problem, then i suggest using a <div> instead if the <img> tag and change the divs background property on hover.
here's a working fiddle
update:
if you want to change the image on hover of the parent div, modify the css selector as in this working : fiddle
As per the HTML code the CSS is not matching:
using .preview a img will be wrong as you are calling the img tag in side the a tag in your CSS.
However your HTML says that you have img tag inside the div class=preview and a tag is above all.
There are multiple ways to achieve the output. One of the easiest way is as follows:
EDIT: As per the comment the edited script was posted as below:
$(".preview").hover(function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
}, function() {
$(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")
})
Please jQuery in your HTML and write the above script, if you are not using CSS3.
Fiddle Demo is also modified
You could do the same thing in css as well if you do a little bit of modifications in your css
Check this updated fiddle
http://jsfiddle.net/gw6w9/1/
Here in .preview img rule, I set the height to 45px as well since, the actual image is 200px x 200px and you have set the width as 45px meaning it will scale the height to 45px as well and I set the background-image to the initial image as well. so when it loads the grey image is loaded.
I also modified your rule .preview a img:hover to .preview:hover img because
1) I don't see an a under .preview
2) You hover over the div anyway.
under this rule you can set the background-image to the new url.
Hope this works for you
As per related answers given by others, i have modified a small change without any extra javascript nor css. It works in all versions
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/>
DEMO
http://jsfiddle.net/ssuryar/wcmHu/468/
I have this problem and I don't know how to fix it. In my project many html files have defined for div an width style, for example:
<div style="width:200px" id="boom">/*****/</div>
In css file if I put a condition like:
`div#boom{width:auto !important;}`
is ignored because style is defined in html for that div and from what I know html condition beat css condition.
How is possible to fix that? I don't want to edit all html pages because I would take a long time.
You are doing something wrong. Because !important makes the style the highest priority, so it always use the width: auto; and not the inline CSS.
An live example that this works: http://tinkerbin.com/wzrFiyaq
And a tutorial: http://css-tricks.com/override-inline-styles-with-css/
div[style] {
width:auto !important;
}