This question already has answers here:
How can I print background images in FF or IE?
(8 answers)
Closed 9 years ago.
I'm trying to print a web page form in IE with a background-image; now the issue is that it is not showing background-image in its print. Is there a way to fix it because I tried lots of tricks but none of them are actually working. if any one of you fixed it before please share.
This is just for people who may try to spend a lot of time to print css background images.
This may not be 100% working, but you may pick from here.
Solution: not possible (if overlapping images are present in UI)
$('#rootdiv').find('div').each(function(){
if( $(this).css("background-image") != "none"){
$(this).css("overflow" ,"hidden").css("position", "relative");
$(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');
$(this).css("background",'..');
}
});
P.S.: To have sliced half image print on the page, we need to set a width for the div ( i.e., $(this) ) less than actual width of background-image( specified by src in dynamically created img tag above) , it will show sliced image
Here are two really good posts, previously asked in stackoverflow:
Print webpage with background images and colors?
https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
They both reference list style usage.
Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images".
This instruction is for IE 8.0, but should be somewhat the same for older versions.
This is default to unchecked because not everyone wants to print the fancy stuff but only the text.. But nowadays, its quite a norm to want everything in the printing!
If it's only for the background image, you could try and right click the background, and select something like 'show background-image.'
But, if you want the web page as a whole, you could always try to 'print the screen' and open the newly made bitmap in paint and print that.
By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.
Apart from telling your users to change this setting, the only thing you can do about this is to use real image elements instead of background-images and position your text in front with CSS.
Why do you need the background-image to print out? If it is because the background image is dark and the text in front is light (and therefore unreadable when printed), then what you can do is have a print-only stylesheet that sets darker text.
First hit in google:
http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm
Just checked and the option is still in IE8.
The default is to not print background colors and images, probably to save ink.
Check this article:
http://webdesign.about.com/cs/css/a/aa042103a.htm
I use it to make custom print page ,different from the one from screen.
Related
I would like to know if I can use JavaScript to detect if the browser's print settings will display background colors. I have no desire to try to alter the setting, I would just like to respond to the settings state.
I'm still relatively new to JS and I apologize if this is repeated elsewhere, but I've spent a few hours searching and everything I've come up with is about setting the state, rather than merely getting it.
My use case is this:
I have CSS progress bars with inner and outer div's. The inner div width and color display the progress (color changes based on certain criteria). Most of the viewing will be on screen, and 95% of printing will be to PDF, the remaining 5% of printing will be to the printer. What I would like to do is use JS & CSS to display the progress bar one way if the user has selected to display background color and another if he hasn't. Is there any way I can read the setting in JS i.e. pseudo code:
doesDisplayBackground = browser.settings.printer.displayBackgroundColors;
Right now I'm just using my no background color solution for all printing but it's nowhere as nice as the colored solution so I'm hoping there's something that will do the trick but I can live without it.
TIA
The browser's printer setting are not scriptable. All you can do is use a print stylesheet.
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks
According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.
I have an image icon in an HTML page that should show right to a label only when some condition is true. If the condition is false, it should not show, but it should still take up the same space.
I'm sure most of you have done something like this and I got a couple of solutions.
Put the img tag as usual but add to its style attribute visibility: hidden when the condition is false.
Specify the width and height style attribute for the img tag and use a transparent 1 X 1 image when the condition is false.
I don't like either since it seems like pre-CSS 3. Does anyone know the best practice of doing this?
EDIT: When the image does not show, I don't need the image, but I need its space not to disrupt the positioning of the rest of the elements.
CSS 3 isn't really supported all that well and still includes most things from 1 and 2 anyway. I see absolutely nothing wrong with your first option.
option 2 is not as clean but certainly viable if you're expecting it to be viewed by something that doesn't support CSS.
Create div with the size of the image e.g. width/height and show or not the image in the div
The "best practice" here would mean not printing the image at all, if there is no reason to be printing an image. I assume since you mention a 1x1 pixel, that you are simply trying to hide the image altogether. So don't print it!
If your layout needs the image to exist though (let's say you have a link gallery where every link has an image) then you need some sort of icon/picture that indicates there IS NO picture -- something generic like a silhouette or question mark.
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.