I've a css class with an image url, the path is correct as in inspect mode in Chrome I can see that class has loaded the image, but in the <img /> element the image is not showing up. It works only when I put the Image path in its src property.
In the screenshot, the red marked area is where I tried to use the class but not working, and the green marked area is where I put the image path in src property directly and its working.
I tried both background and background-image properties in CSS and none worked. For now I can settle it by using the src attribute instead of the css class, but my question is why the image is failing to render when passed using a css class?
if I'm correct, you use background-image on img tag. it's not best practice and it's not the purpose of this style rule. you can use div instead of img for background-image.
It seems to me that it is working properly. We can see the calculator image in the background. Your problem is that your <img> has no src attribute (hence the icon with the broken image).
Related
This is a long shot... I'd like to have an svg shape appear before every h3 element, but which changes color with the class of the div it appears in. I understand that I can't do it by referencing a separate svg file through the "content" property.
Is there a way I can do it by referencing an inline svg - through the content property or otherwise?! As the actual text on the site will be written by users who can't use html, I can't simply hard-code it before every h3 element...
Thanks!
Unfortunately it's not possible. You need access to the svg's stroke or fill property to change the colour. Images added to the pseudo-element's content property (e.g. content: url(my.svg) is generated content and as such should just be seen as a flat image. Only the 'box' that is the pseudo-element is able to be modified through css.
Ideally, you would inject the svg inline into the DOM. However, you would still need to edit both the color property for the h3 text and either the stroke or fill property for the svg as well. As mentioned by Paulie_D in his comment, an icon font would get around this and inherit the color from the h3 tag. You can even create a custom icon font with your svg(s) with something like this.
I have problem with changeing bootstrap 3 background image, as a background of .container i use image, id like to set some other image as background image so it will fill empty space's on sides.
Can i kindly ask for some help ?
Link to site
Attach the image to the body element instead of an element with the class container using css.
body {
background: url('x');
}
x can equal an absolute image path or a relative path.
this can also be implemented using inline styling directly on the body element in your html
<body style="background:url('x')">
The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/
I am using ExtJS textarea and trying to remove the border and background image for the textarea. I am able to remove the border for the textarea, but unable to remove the default background-image.
The component in fact is not taking the background I have set in fieldStyle. When I inspect the element in firebug after the textarea is rendered, I don't see the background in the style.
var textArea=Ext.create('Ext.form.field.TextArea', {
width:200,
fieldStyle:'border:none;background:#FFF !important;width:120px;'
}
How do I override the background and width only for the field?
Thanks
Remember that, besides adding the "!important" directive, your stylesheet must be the last one to be loaded, the "cascading concept", so your rule would be the one to be read.
after the CSS rules loaded for extjs, yours must come after.
Hope this helps.
change to background-color:#FFF !important.
<a class="success" href="javascript:void(0)"></a>
//CSS for setting background for above link
a.success:hover{
//set background image
}
My intent is to change the class of the link on server side based on success/fail and set icon for the link accordingly. But the above CSS is not working as expected.
There is nothing wrong with that css.
However, your link is empty so it will not take up any space meaning that a background image will not be shown.
You will need to put something in the a tag or make it a block level element in order for the element (and the background...) to show.
By the way, I am just assuming that you are not really using the // to comment in your style-sheet as that is not valid. Use /* */ if you want to comment in a style-sheet.