Print the background image on printer - image

I have a page in which background image is not printing by print command.
If I set "File->print setup->Print background" then it print the image on paper in mozilla. How Can we print the page on printer. I've already set the media as print.

By default many browsers does not print background images and colours.
To make WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:
-webkit-print-color-adjust: exact;

I have found the answer !
You take an image (images will be printed)
then you calulate the width of the image example (50px) then you take the div size of the div you want to add a background to example 400px
now you know you need 8 images next to each other 8x50 is 400
Then you do the same.
So basicly you post alot of images
It sounds hard but there is an example at this question repeat img like it is a background
if you use 1 img like a color you can set it in your css with:
#divnam img
{
widht:100%;
height:100%;
}
I hope this will help cause it took me forever to find a solution !

Related

Make image go out of its div in CSS & html

I want to achieve this result :
So, an image(square with red borders) and a text aligned in 2 separate columns. The background is yellow. The image sticks out of the background for aesthetic.
I have search on the forum and tried to find a solution but I couldn't.
Could someone show me the code to make this simple layout ?
Thank you :)
I tried overflow:hidden and position:relative and position:absolute but couldn't make it work !

Change background color of transparent PNG images uploaded to blogger

I have a blog hosted by Blogger with a custom template: http://www.drugchannels.net/
Images uploaded to the blog are hosted at X.bp.blogspot.com (where X is a number). Examples:
https://1.bp.blogspot.com/-Jwy2VQYRIEA/WqmwvsA07WI/AAAAAAAATA4/jWVcEts1h1Y4IXM0hD0njUhSmQ2AZPnxQCLcBGAs/s1600/Specialty_vs_Retail-2014_vs_2017.png
https://4.bp.blogspot.com/-O4S9ps4u67k/Wk0yhTEuV-I/AAAAAAAASUE/5tPedr-p7_4kedNYU4RY711l6K3maokiQCLcBGAs/s1600/DCI-Copay_Accumulator-03Jan2018-CORRECTED.png
I want to have a white background when the image is clicked. (The images look fine on the site itself. This is not a problem with the blog's background, which is set to be solid white.)
Using the Inspect option in Chrome, I see the following information
The body formatting (background: #0e0e0e;) does NOT appear anywhere on my blog or in my template.
How can I fix?
Thank you!
P.S. I have 10 years of legacy posts with images, so I need a global solution that changes the background to white for all images posted to the blog.
Wrap the image in a div and set the background color of that div with css. That should work
.divclass:active {
background:#FFFFFF
}
If you are opening the images in a new tab or window then your only option is changing the background of the images yourself with a photo editor. If you're just trying to give the user a full size view of an image when they click it you could use javascript/jquery and have a full size div with a background and an image pop up in full screen without sending them to the linked image. Theres probably quite a few jquery plugins that will do this with minimal coding knowledge, just google it.
Thanks, Riley.
I can't go back and edit hundreds of images, so the photo editor option won't work.
But based on your suggestion, I used the following solution:
1) Enabled "Showcase Images with Lightbox" on blogger
2) Added CSS from this page (http://www.howbloggerz.com/2016/05/how-to-customize-blogger-lightbox.html) with no background image and background color set ot white (#ffffff).
Downside is that charts/images now pop up on same page rather than opening in a new tab.
Thank you!

Foundation 5 Data-Interchange background images

I already have data-interchange images on the page - they work fine.
Now that I want to put a background image in a 'div' - I can't get it to work.
What actually happens the image will not show until I put some content in the div. And, of course it only shows enough image to cover the block element in front of it.
I'm guessing I have to some custom CSS to fix this. I actually want the div to be content free, but just show the background image/s based on screen size via data-interchange.
Can anyone help please.
a little vague but from what you have said. have you tried adding the class
.clearfix
on the div with your image in.

Safari Rendering image background black on load

I'm currently working on a website and having an issue with Safari. When loading an image there is a black background that is placed as a stand in. I would rather this be transparent or white, but I can't seem to figure it out. Check it out:
http://blazing-ocean-6482.herokuapp.com/
I've made html and body have background-color:white; but this doesn't seem to have changed the issue.
Just save the PNG image with interlaced option
I had the same problem in safari 6.
My image was in grayscale color space. I switched it to rgb and the problem disappeared.
Try to check your images color space settings!
This happens because the PNG has no alpha channel.
Photoshop saves the image with the alpha channel only if the image has transparent pixels.
In order to work properly in Safari, IHDR chunk of PNG image must have "truecolor-apha" in it contents.
You can see the png chunks in tweakpng (http://entropymine.com/jason/tweakpng/) or similar programs.
I've had the same issue as above (only in Safari too). My body tag has a background image, is repeat-x and is used as the background for the whole website. When a user goes to the page in Safari, there is a flash of black on page load. I've searched for ages for a solution to this, but it appears to be an unresolved bug with Safari.
I'ved tried adding "style: background-color: #FFF" to the html and body tags and also tried using the old school "bgcolor: #FFF" - none work.
The only way I could get Safari to behave was to use CSS + jQuery. Give the body a class of "bg-on" in your html and CSS files. In a linked .js file or in the of your html page in tags:
jQuery(function ($) {
$(document).ready(function(){
$('body').removeClass('bg-on');
});//end document ready
/* NOTE (window).load fires when images have been fully loaded */
$(window).load(function() {
$('body').addClass('bg-on');
});//end window load function
});//end jQuery function no conflict mode
What the above does is when the DOM is loaded by the browser, it removes the class from the body, therefore Safari won't show a black background as no background-image is there. Then when the window.load event fires, when all assets have been loaded, the body is given the background image...
It won't affect JS disabled browsers either, as the class of "bg-on" is hardcoded into the html.
Not a particularly elegant solution, but it works for me.
I had this problem recently in Safari 6.0.2, which also showed up in mobile Safari (at least in iOS 6). Saving my background as interlaced didn't work across the board & the colour space was RGB. Thankfully my background had very few colours & converting it to GIF fixed the problem entirely.
My problem was, that I have uploaded correct file, but with page builder I have edited the image - and was converted to jpg from png.
First make png with alpha and then upload - worked.

WP7 WebBrowser's transparent background (workaround)

It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.

Resources