How to hide an element when printing a web page using CSS?
Last Updated :
03 Aug, 2023
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...