I've used url() in my project, but it is not showing the picture in IE 6? does IE6 not support url()? How should I solve the problem?
The code is as below:
<img class="avatar" style="background:url('./avatar.jpg') no-repeat scroll 5px 7px transparent;" />
Use background-image:
<img class="avatar" style="background-image:url('./avatar.jpg')" />
Also note that you had an extra ) at the end.
Also make sure that this is actually a problem with the background image. What happens if you set the background color? Do you see it then? It could be a layout problem that it causing it to not appear.
The entire tag looks wrong. I would do something like this:
<img class="avatar" style="background-image: url('./avatar.jpg');" alt="" />
I would also check that the path is correct.
-- Edit --
After testing, I've noticed that a path like './avatar.jpg' will never work. It's looking for a folder entitled . in the same directory as the file you've written the style in. Do you have a folder named .? I don't think so. It's an illegal directory name.
Related
How do we capture the image that has the following code ? since it is different from general format where i only capture the src and img.
<div class="avatar" style="background-image:
url(customavatars/545/5453285_1410924046.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;width: 120px;height: 120px;border-radius: 70px;margin: 10px 0 10px 10px;" onmouseover="showUserInfoBox('userinfo234340519')" onmouseout="clearShowUserInfoTimer()"></div>
Original web site
Visit https://mobile.uwants.com/viewthread.php?tid=19780494&extra=page%3D1
The image : Visit https://imgur.com/Gbckna1
Thanks
Since the image you want to get is defined as a css background, you'll need to extract the contents of the style attribute, and parse the css you get from that.
You can try to do this yourself, but it would probably be easier to use an existing library, such as cssutils or tinycss2.
You can use re_first()
response.xpath('//div[#class="avatar"]/#style').re_first(r'url\([^\)]+')
Here's the issue, I want to pickup an image from my backend website.image_url(employee,'image_medium' )
It works when I use it with <img t-att-src="website.image_url(employee,'image_medium' )" />
But as soon as I try to use as CSS attibute, it doesn't work. How can I solve the issue?
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
Try this:
<div style="background-image: url('"website.image_url(employee, 'image_medium')"');">
The single quotes withing you call to get the image I think are what is breaking the css as it thinks the first is ending the url.
url also doesn't actually need single quotes, so you can also try:
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
I am currently working in Wordpress usnig the Visual Composer. I wish to make an image simply change on mouseover for now. I have read many different ways of doing this with Java and CSS but nothing seems to be specifically for this.
Many thanks!
Working example checks it , replace images with your own.
<a class="foo" href="#">
<img src="http://lorempixel.com/400/200/food/1/" />
<img src="http://lorempixel.com/400/200/food/2/" />
</a>
<style>
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
</style>
http://jsfiddle.net/gd8ba/light/
Thanks
Say, I have a link -
<a class="my-link" href="http://www.my-website.com"></a>
I need to show an image on mouse over this link. So, I will add two things in my CSS-
To add image to the link
.ge-link { background-image: url('http://my-website.com/my-img.png'); background-size: contain;background-repeat: no-repeat;}
To add hovering property
.ge-link:hover { background-image: url('http://my-website.com/my-img-hover.png'); background-repeat: no-repeat; background-size: contain;}
I know this post is old, but recently I had the same inquiry, so I found this plugin https://es.wordpress.org/plugins/image-over-image-vc-extension/. I've tested it with WPBakery on WP 5.6.3 and it works fine.
Here are the demos. Hope it works for anyone needing this functionality.
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one