How to hide an element when printing a web page using CSS?
The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing.
Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.
html
<!DOCTYPE html><html> <head> <title>Hide element at print</title> <style> body { text-align:center; } h1 { color:green; } @media print { .noprint { visibility: hidden; } } </style> </head> <body> <h1 class = "noprint">GeeksforGeeks</h1> <p>GeeksforGeeks: It is a computer science portal for geeks</p> </body></html> |
Output:
Before printing the page:
After printing the page:
Example 2: In this example, use a media query to hide image elements when printing the web pages.
html
<!DOCTYPE html><html> <head> <title>Hide element at printing</title> <style> body { text-align:center; } h1 { color:green; } @media print { img { visibility: hidden; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> <img src="gfg.png" alt="image"> <style> .noprint { visibility: hidden; } </style> </body></html> |
Output:
Before printing the page:
After printing the page:
Please Login to comment...