I have a web page which changes the background-image url of an element when it is moused-over (using the :hover css pseudo-class).
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url("a-icon.png");
background-size: 100px;
}
.myClass:hover {
background-image: url("b-icon.png");
}
In order to avoid a flicker while the browser fetches the 'hot' image for the first time, I use the following JavaScript code to pre-load the image:
(new Image()).src = hotImgUrl;
This works with Firefox & Edge if they don't already have a cached version of the image (i.e. on first visit).
But if you reload the page once the browser has cached the image, it no longer works and you get a flicker as you mouse over the image.
Chrome & Safari don't have this issue.
I have created an example below, which shows the issue.
//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
background-size: 100px;
}
.myClass:hover {
background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}
<div class="myClass"></div>
Is this a Firefox/Edge bug? Or am I going about this in the wrong way? Any help would be much appreciated!
Try this:
//pre-load hot image:
(new Image()).src = "http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png";
.myClass {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url('http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png');
background-size: 100px;
}
.myClass:hover:after {
content: '';
display:block;
width: 100px;
height:100px;
background-size: 100px;
background-image: url("http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png");
}
<div class="myClass"></div>
Not really sure that it will help, but at least try.
You can unify 2 pics as 1 pic and can change just background-position. So pic loads when page is opened.
div{
background:url("http://www.csstr.com/3.png");
width:100px;
height:95px;
background-position:0 center;
}
div:hover{
background-position:100px center;
}
<div></div>
So what about this one? 2 pics are loaded when page is opened, we need to just set z-indexes.
div {
position:relative;
}
img {
position:absolute;
left:0;
top:0;
}
#pic1{
z-index:50;
}
#pic2{
z-index:40;
}
div:hover #pic2{
z-index:55;
}
<div>
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-a-icon.png" id="pic1"/>
<img src="http://icons.iconarchive.com/icons/iconexpo/speech-balloon-orange/128/speech-balloon-orange-b-icon.png" id="pic2"/>
</div>
Related
I have two problems with this Javascript code. (credit to redditor u/Symboltic for suggesting to me the javascript code here. I appreciate his recommendation, just want to make it more applicable and versatile for more coding situations)
1st problem:
While the following javascript code does function, to go over to a background-image: url() via mouseover, unfortunately, mouseover on that 's background-color, or blank area in general, also goes over to the background-image:url().
For tags, how do I enable mouseover function(), which goes to the background-image:url(), when mouse is only on the background-image for the element?
2nd problem:
mouseover on the tag somehow does not go over to the background-images:url(), when I mouseover on the background-images in tag. Only rarely does this happen, if at all.
I'd like for this mouseover to be able to go to the background-images link in the body tag when the mouseover is on any of the the background-image: url()'s. (Regardless of how many background-image: url()'s that I might put in in the future.
Thanks for all your helpful answers.
Javascript code
document.addEventListener('mouseover', ({ target }) => {
const { backgroundImage } = getComputedStyle(target);
if (!backgroundImage.startsWith('url(')) return
let extractedUrl = backgroundImage
.slice(4, -1)
.replace(/^["']|["']$/g, '');
location.assign(extractedUrl);
});
HTML code:
<style>
#n{
background-position: 40% 45%;
}
.rap{
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra{
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os{
height: 5000px;
width: 9000px;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg"),
url("https://i.ibb.co/1KL4Kdj/op.png");
width: 2820px, 1920px;
height: 2050px, 1080px;
background-position-y: 35%, 4%;
background-position-x: 0%, -3500%;
background-repeat: no-repeat;
background-color: azure;
}
</style>
</head>
<body>
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"
style="float:left; position: absolute; left:7800px; top:60px;">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"
style="float:left; position: absolute; left:5000px; top:7000px;">>
<p><div class="rap"></div></p>
<div class="os"></div>
<div class="ra"></div>
</body>
I have a problem I need to put a background image to the body of my page but that this is responsive and suits any size .. this I should do only with css or also javascript, could give an example please
For the HTML:
<body class="background">
<!-- Content goes here -->
</body>
For the CSS:
.background {
background-image: url(image.png);
background-size: cover;
position: fixed;
}
Tell me how it goes!
For the CSS
.body {
background-image: url('myImg.jpeg');
background-position:center top; // you can change this as you like.
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
height: 100%;
width:100%;
}
Add -moz-background-size for Firefox Browser.
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)
It doesn't flicker here and on this fiddle:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
height: 3000px;
margin: 0;
}
#bg-wrap {
position: relative;
width: 100%;
}
#bg {
height: 600px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover!important;
}
#bg-text {
position: absolute;
top: 200px;
left: 47%;
font-size: 3rem;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
<div id="bg">
</div>
<div id="bg-text">Hello!</div>
It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).
Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.
Any help as to understanding the cause and providing a possible fix would be greatly appreciated.
Try using:
transform-style:flat
on the css rule of the flickering image
or
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output