For my current use case, I have to set the inner html of my element programatically due to it using markdown:
<div
className='quote-copy'
dangerouslySetInnerHTML={{
__html: body?.childMarkdownRemark?.html,
}}
/>
In this element, I have to make sure a quote icon appears over the first two lines of the set paragraph like this:
However, when trying this, I only managed to get it working on the first line of the paragraph like this:
By using the following code in my scss file:
.quote-copy {
> :first-child {
&::before {
content: '';
overflow: hidden;
display: inline-block;
background: url('../../../assets/icons/quote.svg') no-repeat center;
object-fit: contain;
width: 60px;
height: 40px;
background-size: 60px 40px;
}
}
}
Does anyone know how I can make the quote icon appear over the first two lines of copy?
try to use the "float:left" on your pseudo element
This question already has answers here:
Is there a way to interpolate CSS variables with url()?
(4 answers)
CSS set background-image by data-image attr
(4 answers)
Closed 3 years ago.
I'm trying to assign the url of background-image dynamically though css from the attributes defined on html tags. But it seems neither attr() nor var() works. I'm avoiding to use javascript because the url might change later so I have to trigger that script manually again.
Is there a better solution for this?
body {
display: flex;
}
.normal, .attr, .var {
flex: 1;
height: 240px;
border: solid 1px #666;
background-size: cover;
}
.normal {
background-image: url("https://picsum.photos/320/240");
}
.attr {
background-image: url(attr(data-bg));
}
.var {
background-image: url(var(--url));
}
<div class="normal"></div>
<div class="attr" data-bg="https://picsum.photos/320/240"></div>
<div class="var" style="--url: 'https://picsum.photos/320/240';"></div>
Even more, I wish I can concatenate the string if it's possible.
.image {
border: solid 1px #666;
width: 320px;
height: 240px;
/* I wish this is possible */
background-image: url("http://www.example.com/images/" attr(data-bg) ".png");
}
<div class="image" data-bg="adorable_cat"></div>
Even if I feel like it would be much easier to do with simply using inline background-image property (especially if you want to concatenate url string). For simple use you can do that like that:
<div class="var" style="--url: url(https://picsum.photos/320/240)"></div>
.var {
background-image: var(--url);
}
For reasons unclear for me, using url(var(--url)); doesn't seem to be working at all (at least at Chrome)
Put an embedded stylesheet in the document's :
<style type="text/css">
.logo
{
background: #FFF url(<?php echo $variable_holding_img_url; ?>);
}
</style>
for more information
enter link description here
How to have dynamic image as CSS background?
I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.
When hovered, it has
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?
I tried to search Stack Overflow for the similar question, but with no luck.
Just added:
Should I "preload" the hovered image? How?
Should I play with z-index or opacity?
It happens with all browsers and thus the solution should work for all browsers.
Here is a simple and effective css image preloading technique I have used several times.
You can load several images by placing content: url() url() url()... etc.
body:after {
display: none;
content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}
The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.
That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.
A simple trick I use is to double up the original background image making sure to put the hovered image first
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
No performance hit and very simple
Or if you're not using SCSS yet:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
If you do this:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
This will really help!
See here:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - not my work but a solution I found :)
#Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).
However, changing "display: none;" to something like:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).
You can preload images
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);
This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:
<img src='...' style='display: none' />
If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hover class for the top image having display: none;
This way both images will be preloaded, but hovering will make the second visible.
The "double up the original background image" trick didn't work for me so I used another css trick:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)
Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.
So long as they both share the same size and positioning rules, you should see a neat swap.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
I had the same issue.
After trying everything related with css i can not solve the problem.
What finally solved the problem was simulating that someone hovers the element.
The css is the normal one.
CSS
#elemName{
/* ... */
}
#elemName:hover{
/* change bg image */
}
JS
var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
'view': window,
'bubbles': true,
'cancelable': true
});
element.dispatchEvent(event);
Just change the size of the background image, instead of the source of it! So...
a.class-btn {
background-image: url('path/to/image-hovered.jpg');
background-size: 0;
}
a.class-btn:hover {
background-size: auto;
}
The best way to do this is to just insert the images onto the webpage and set display to none.
I would like to create a link out of the following so that the image is clickable.
What would you do to get the background-image clickable?
HTML: (Displays an Image which I would like clickable)
<div class="some_image">
</div>
CSS:
.some_image{
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
You can't make a background image clickable with HTML alone. It's a property of an element and not an element itself. Simply wrap the div in an anchor. This is permissible in HTML5 spec.
More info
Of course, you could simply style the anchor:
.some_image {
display: block;
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
<a class="some_image" href=""></a>
You can't do this traditionally however you may achieve the effect with hacky techniques:
#heatSpot {
position: absolute;
left: 20px; // over area of bg image
top: 10px; // over area of bg image
cursor: pointer;
}
then just fire the link or whatever your trying to do onClick with either wrapping above element in <a> tag -- or using jQuery / JavaScript.
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/