I am creating certificate, In which I am using div background image. All things working properly. At the time of printing div background image is not displaying.Div background not displaying not even in pdf.
I am using this media query .
#media print
{
* {-webkit-print-color-adjust:exact;}
.clsprint
{
background-image:url(cert.jpg);
background-repeat:no-repeat;
}
}
Try this Add style in Js while Priniting
`var divElements = document.getElementById("divAlterationPrint").innerHTML;
var w = window.open('', 'Placement Form', 'width=860,scrollbars=yes');
w.document.write('<html><head><title>Placement Form</title>');
var sdf = '<style>#divId {background-image:url(cert.jpg);}</style>';
w.document.write(sdf);
w.document.write('</head><body>');
w.document.write(divElements);
w.document.write('</body></html>');
w.print();
w.document.close();`
Related
I need to get the width and height of a background image, I've seen examples where these can be easily retrieved ONLY IF the properties are set in CSS.
Is there anyway to get width and height when they are not set in the CSS either inline or in a CSS file?
This is all I have to work with...
element.style {
background-image: url(generated-by-cms.jpg);
}
Thanks!
I don't think you are able to get it via CSS if you didn't set the property up. As the image is being loaded externally, the CSS file has no clue about the size. Furthermore, if you are trying to set it up via background-image, the image will be restricted by the element size.
What you can do however is load the image via Javascript (since you already have the url anyway) and then set your element to the dimensions you want. For example, let's say your HTML file contains an img tag with the id "myimg"
<img id="myimg"></img> <!-- an empty image -->
You can then set up your Javascript like this:
var img = new Image(); // an empty image object
img.src = 'someurl'; // image url
// this is fired after 'someurl' is loaded.
img.onload = function() {
document.getElementById('myimg').src = img.src;
document.getElementById('myimg').width = img.width;
document.getElementById('myimg').height = img.height;
}
Note that you don't have to set the empty image or it's properties if you don't want to. You can manipulate img.width and img.height properties and use it elsewhere if needed.
I'm wondering if it's possible to use only CSS to create a parallax scrolling background that meets the following specifications.
It works on an element that sits inside an otherwise static layout (i.e. my whole page layout isn't a group of parallaxing items)
The background isn't entirely fixed in place; it moves, just not as fast as the rest of the page.
I've looked up tons of tutorials for parallaxing backgrounds, and have found some seemingly great tutorials, but they all have one of the following problems.
They rely on the whole page being a parallax group so that you're actually scrolling over a container via an "overflow: auto" specification
The background is totally fixed in place
they use JavaScript.
Sooo, I can accomplish what I want with JavaScript fairly easily. Here's a full working example on JSFiddle that you can try out.
CSS
.parallax-row {
background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
background-size: auto 150%;
}
JavaScript
/**
* Update the parallaxing background img to partially scroll
*/
jQuery(document).ready(function($) {
$(window).on('scroll', function() {
$('.parallax-row').each(function(index, el) {
var $el = $(el);
var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
var windowHeight = $(window).height();
var percent = (fromTop * 100 / windowHeight);
$el.css('background-position', '0 ' + percent + '%');
});
});
});
Is it possible to accomplish that same effect with just CSS?
By default the quality of image is fine, but when I load it to the resource the quality became blurred. Why it's happening and how to fix it?
example whith original image and how it look's on page
// S L I D E R - S I N G L E
function setCurrent (first){
$('.current').html(first);
}
// set images to preview and remove big images
$('.description-single').find('img').each(function(){
var photoSrc = $(this).attr('src'),
photoImg = '<img src="' + photoSrc + '">';
$('.all-photos').append('<div class="photo-template">' + photoImg + '</div>');
$(this).remove();
}); // end each
// set first image preview to current box
var firstPhoto = $('.all-photos').find('div.photo-template:first').html()
setCurrent(firstPhoto);
// click handler
$('div.photo-template').on('click', function(){
var selected = $(this).html();
setCurrent(selected);
});
if($('.all-photos .photo-template img').length < 2) {
$('.all-photos').hide();
}
live example http://beardhouse.com.ua/detskie-divany/mishutka
Ok, this is a problem with how bootstrap has the img tag in CSS has a max-width: 100%; The container box is smaller than the image so it's downsizing and losing quality.
Looking at the CSS it looks like the padding on .current is messing up the sizing of the actual image.
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.
Examples:
http://www.marinayachting.it/
http://alexandraowen.co.nz/
background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.
There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.
There is no magic to making a background image load quickly, you just:
Have a fast server.
Compress the image as much as possible.
Make your page HTML small so that the rest can start loading as soon as possible.
Don't have many other images that also has to load.
Don't have a lot of scripts and other external files that has to load.
I found this tutorial helpful. ->
http://css-tricks.com/perfect-full-page-background-image/
Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.
You can set the style inline so that the image can start downloading without waiting for any css file to be ready.
If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
This method could be applied to divs too, Good luck.
In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
As well as the HTML on the page:
<body style="background-image: none; ">
If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.
<img id="foo" src="bar" alt=""> with #foo { width: 100%; height: 100%; }(use position: absolute; / position: relative; & z-index for layering as desired)
Here's an old example.