I have css file like this
.mask {
display: none;
}
#mask.loading {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
background-image: url('/icon.gif')
background-position: center;
background-repeat: no-repeat;
}
table.loading {
opacity: .5;
}
And I want to show icon until table loads so I'm calling it like
$('#tableDisplay,#mask').addClass('loading');
$('#tableDisplay,#mask').removeClass('loading');
And in my html I added as
<div id="mask"></div>
<table id="tableDisplay">
</table>
And when I load page I can see table opaque but I do not see icon and my icon file is in same dir as css file
With your use of:
background-image: url('/icon.gif')
The slash is telling it to look in the web-root for the icon ... Remove the slash or give the full path IE
background-image: url('icon.gif')
background-image: url('/your/path/to/css/icon.gif')
This should also be apparent when you look in your console and see the 404 for the icon, you'll see the directory that the CSS file is "trying" to find icon.gif in
Your first CSS rule has a class selector but it should be an ID:
#mask { /* instead of .mask */
display: none;
}
And your icon URL contains a slash which shouldn't be there if the icon is in the same directory:
background-image: url('icon.gif');
Related
I've not been able to find any thing about this issue so far, hopefully it's something simple that someone here has come across before. The code and example below have been simplified for brevity.
I'm using Vue V3 with Vue CLI for running it locally.
I have two views which have an element with the same class in each, I'm using scoped CSS for the styling of the element and Vue Router to handle routing.
I load the first page, Home, and see the background image as expected however when I click the next button it takes me to the next page with the correct URL and content but still shows the image from the scoped CSS on the Home view.
If I then do a full refresh in the browser the styling clears, is this a bug in Vue of do I need to do something to force a clearing of the style?
Home.vue
<template>
<div
v-if="content"
class="content"
>
<router-link :to="`/next-page`">
Next
</router-link>
</div>
</template>
<style>
.content {
min-height: 100vh;
background-size: cover;
background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}
.content:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
top: 0;
left: 0;
}
</style>
NextPage.vue
<template>
<div
v-if="content"
class="content"
>
Some text content
<router-link :to="`/home">
Back
</router-link>
</div>
</template>
In Home.vue component style add the scoped attribute to the style tag:
<style scoped>
.content {
min-height: 100vh;
background-size: cover;
background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}
.content:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
top: 0;
left: 0;
}
</style>
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>
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
i'm putting an overlay so that the elements on my page are disabled.
On my page there are two elements.
One is an anchor tag and another is a file upload input control.
File upload control is invisible by default and is triggered on clicking the anchor tag.
The problem is i have an overlay over these controls but its not working for the invisible file upload control.
During overlay if i click on the file upload area its triggered.Here is jsfiddle
Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable
Here is the html code
<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>
Jquery code
$('#uploadQrCode').click(function(){
$('#qrCodeFileUpload').click();
});
And here is the css
.hideQRUpload
{
position:absolute;
opacity:0;
width:0px;
height:0px;
}
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: red;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.ast{
position: relative;
}
Change css for .notEdit-overlay like this
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: none;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1;
}
should use z-index.
http://jsfiddle.net/T5E8D/3/
Try adding pointer-events: none for your upload field – http://jsfiddle.net/T5E8D/2/
I'd actually want to change an image when someone hovers the mouse over the image.
Lets say I have an image:
<img src="image.png"/>
I want to change it with the following effects on hover:
The image should be clickable, so it should be a link which redirect users to another page
The image's background should be black-ish, with opacity
On the image it should appear an other image in the middle
How is it possible to do it?
I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
you can make it like this:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? just ask