I have something like this in css
.ajax-loader {
background-image: url(../images/icon/loader.gif);
}
and used on HTML elements like this
<div class='ajax-loader'></div>
my question is:
If the ajax-loader style is used multiple times in a single page, will the image loader.gif be loaded multiple times or only once?
This image will be loaded once.This is very simple like object-oriented programing.Define a class once and use everywhere.The same thing is followed in css.
Once the image is loaded you can use it everywhere and also this is a good programming approach
Related
I have several different templates that use different background images. While I know I can inline the background image or create multiple classes to use different background images — I am trying to be creative while making my life easier. Here is what I am aiming for:
In the HTML div I would like to set a css var or data-attribute named background that holds the image name. So for example:
<div class="bg-image" style="--background: 'image-name'"></div>
or (which I don't think is possible)
<div class="bg-image" data-attr="image-name"></div>
Use that image name to do something like: Tried the following code and I know this does not work, I'm just seeing if something like this is possible.
// tried this
background-image: url("../images/"var(--background)".jpg");
// also tried this, which I think essentially does the same thing
#mixin form-bg-image($slug) {
background-image: url("../images/#{$slug}.jpg");
}
.bg-image {
#include form-bg-image(var(--background));
}
Not sure if this is possible without JS, I just think it would be cool to do! Looking for any solutions using SCSS and CSS.
Maybe you could have a SCSS dependency file with an array, that would map [data-attr=""] elements to background-image property. But that is probably not life made easier solution.
What SCSS -> CSS compiler do you use? If you wrap it in a grunt task runner, you can scan your html files for specific data attributes and include values into dependency before triggering compilation itself.
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
I have built my app using react-bootstrap
I have an image tab inside my component. It looks like this:
render() {
return (
<div id="homePage">
<div class="hero">
<Image src="/images/welcome-page-pic.jpg" responsive />
</div>
</div>
);
Yes, the tag for image in this framework is "Image" not "img".
This will display the image but its not very responsive, so I did some playing around in dev tools and found a styling that worked if I used the image as a background image in css using the following styling:
.hero {
background-image: url(/images/welcome-page-pic.jpg);
height: 400px;
background-size: cover;
background-position: center right;
}
This, of course, requires removing the tag and src altogether, but doing that just removes the image. If I try adding the styles to the HTML (or rather JSX) instead of the css, then the page just doesnt load at all. I also tried leaving the image and src and just adding the css minus the background-image styling - also a no go. Not sure if this is an issue with the framework or something stupid im doing. Thanks.
UPDATE: after playing around a bit more, I found that for whatever reason, my local host is not accepting the class "hero" into the nested div. If I add it in devtools manually, the image appears and responds how i want it to. Now the question is why the class isn't assigned to the div upon page load of the jsx.
I think it should be className in react, from memory.
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
I have the following problem:
My landing page is composed of 2 images: a background image (top-banner) assigned to the body element and another image where I am presenting my content.
My problem is that both images are quite large and always, I have to wait for the main image to show up first, and than the background image.
This is very annoying for my and it does not look nice.
I have created an online version with sample images that clearly show my problem. Please check it: here
I have tried many different JavaScript techniques and online solutions, but none of them solved my problem.
All I want is the background image to show first, and than the main image.
Here is the html code:
<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
<a href="#">
<img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;' src='main2.jpg' />
</a>
</body>
I am open to any solution, JavaScript, AJAX, whatever, just to see it working!
Thank you for sharing your time and expertise.
All the best,
Spiro K.
The problem is that you are using the background attribute. Never use that again, and stop using style attributes. Put all your presentation into an external stylesheet and link to it using a link tag. Doing this will solve your problem as the CSS renders progressively with the DOM.