we are using a large image as a background for a div after loading the page if we hover on that div we are getting blank for a few seconds why is that? Can we have a solution for that? I need a solution without using a sprite image because I need to alter that image in responsive
.hexagonal{
background: url(/images/service-bg.jpg) no-repeat;
}
.hexagonal:hover {
background: url(/images/service-bg-over.jpg) no-repeat;
}
<div class="hexagonal">
<ul>
<li>test1</li>
<li>test1</li>
</ul>
</div>
because this image is large it's taking time to load it and that is why you see blank for a few seconds when you hover the element.
In order to fix it, you'll have to preload those images you need when hovering. there are some ways to do it and there are a few suggestions in the comments for JS solutions but I think using the CSS way is more suitable since you won't need the JS part.
In order to preload images using CSS, you can set the content of the after pseudo-element of the body to those images and then hide the element.
body::after{
position:absolute;
width:0;
height:0;
overflow:hidden;
z-index:-1; /* hide images */
content: url(/images/service-bg-over.jpg); /* load images */
}
Related
Hello I'm using ckeditor to let users to post image but the thing is, the size of an image that user post can be too big. so I was wondering if I can use some css or javascript to hide the content(would be better to minimize the content but I don't have a clue how I can do that) if the content is too big that it goes out of the box.
I'm using bootstrap panel as a box
<div class="panel-body">
{{ post.content|safe }}
</div>
this post.content can't be too big that it goes out of panel-body, how should I prevent from it going out(hide the content)?
Use css .panel-body { overflow:hidden; } on your container to hide the overflowing content (your image).
A more elegant solution can be to automatically resize your images to not overflow the container width. You can achieve this with
.panel-body img {
max-width:100%;
}
Try to put a max-width on your images, like this :
.panel-body img {
max-width: 100%;
}
I'm using the meta slider plugin for Wordpress. A big part of my design is a grey overlay on the slider. I can manage to get the overlay but it goes over the caption in the slider.
I've tried a lot and I haven't been able to do this on my own. How do I get the text above the overlay?
.metaslider .caption-wrap {
background: rgba(50,50,50, 0.4);
padding-top:13%;
}
.overlay:before {
background:none;
}
Keep in mind though, that the above css should be loaded after the slider.css has been loaded, in order for the css rules to have a higher priority.
I just assigned a class called overlay in the metaslider caption box, then I edit the css under Customize mode.
.overlay img {
background-color:white;
opacity:0.7;
}
This is the generated html
<div id="largephoto" style="background-image: url(http://somepath/images/sample.jpg);">
and here is my js call
$('#loader').css('background-image','url("images/sample/gif" )');
I want the image to be like in facebook, regard too small or too large the user uploaded photo, the frame should show the center of the photo and leave no white space within the frame.
I tried $('#largephoto').css('background-image-position','center');
but it seem do nothing
Use css background-size property for fixing the image in DIV
$('#largephoto').css('background-size','100%,100%');
Try this CSS :-
.img_class {
max-width: 100%;
}
This will adjust image sucha a way that image will be cover its container.
#largephoto {
background-size:cover;
}
I have an image at the bottom right of the web page. and i have a content table at the top of the page. If the content table size increases, it is displaying on the top of my image..
Is there a way to display the image all the time [ even with scroll bars ] even when the content table size increases.
Thanks in advance
You could use z-index? The problem is once you have floated the image it is no longer influencing the layout of your page... text will display on top. Perhaps you could try to display: block; and place it in a div under your text, then have it float right?
If you want an image displayed at all times, irrespective of scrolling, it sounds like you are describing an image that is fixed.
You could use CSS code similar to this, where #myImage is the div that contains your non-moving image:
#myImage
{
position:fixed;
width:200px;
height:200px;
right:0px;
bottom:0px;
}
I am running into a problem and I trying to solve it in the only way that comes to mind. The problem is I am trying to take content that is attached to a image button, but the content is hidden and show it next to the button with a background image when the user hovers over it. Here is when the problem comes in, I have the background image currently as just an image(img tag), so I can stretch it by adjusting the height/width. I want to be able to lay the content on top of that image: For example:
<div class="ContentDiv"><img id="ContentButton">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div class="ContentDiv"><img id="ContentButton2">
<ul class="Content"><li>this is first</li><li> This is second</li>
<li>This is third content part</li></ul></div>
<div id="backgroundDiv"><img id="backgroundimg" src="backgroundI_Want_To_Use"></div>
so with jquery I use disregard simple syntax errors
var mem;
var img= $("#backgroundDiv").html();
$(".ContentDiv").hover(
function(){
mem=$(this).find(".Content").html();
$("#backgroundDiv").html(img+mem);
}function(){
});
The above does the intented, which is add all the content after the div img, which is what I'm stumped at, I want to be able to make the background img tag the actual background for the content. If I try to set the background-image in css to the url for the div. The image doesn't make the background as larger enough. Keep in mind I am under ie 6 for some cases but only as far as ie 8 for most cases.
So what I have tried was using css to change the z-index for the image and the content as so: but doesn't work:
#backgroundimg{
z-index:-100;
position:absolute;
}
.Content{
z-index:100;
position:relative;
}
i would use a different approach.
Structure your content like this:
+ DIV (position static / relative)
+ IMG (position relative)
+ DIV (position absolute)
+ "contents"
So you could work without any JS if i understood the question... See an example here:
http://jsfiddle.net/meo/h64w4/4/
<script type="text/javascript">
$(document).ready(function(){
var img= $("#backgroundDiv").html();
$(".ContentDiv").mouseover(
function(){
$("#backgroundDiv").html(img+'<div class="addedContent">'+$(this).find(".Content").html()+'</div>');
/* Use the following line if you want to scale the "background" image to the content */
$("#backgroundDiv").css('height',$(this).find(".Content").height());
});
});
</script>
<style type='text/css'>
#backgroundDiv{
position:relative;
height:auto;
width:auto;
}
#backgroundimg{
width:100%;
height:100%;
}
.addedContent{
position:absolute;
top:0;
left:0;
z-index:999;
}
</style>
If you weren't using a terrible browser, css3 could lend you a hand.
background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]
http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm