CSS: how to insert a centered image element in the paper?

Question

CSS: how to insert a centered image element in the paper?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Personal how can I insert a centered image element like a html document, to define "@media print" format?

In the model I'm applying on screen, for screen viewing.

<html>
<head>
<title></title>
<style>
@media print {}
@media screen {
  header::before{
    content:url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
    content: "";
    background-image:url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
    background-size: 100% 100%;
    display: inline-block;
    /*size of your image*/
    height: 100px;
    width:100px;
  }
  header{
    /* Largura total - Se você omitir ocupará toda a linha */
    padding-top: 20em;
    width:100%; 
    height: auto;
    /*background: #fff url("https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg") 15em -5em no-repeat;
    background-size: 120px Auto;*/
    /*background: none;*/
    padding-top: 0em;
    display: block;
    margin:0;
  }
  h1,h2, h3{text-align:center; margin:0;}
  p{text-align:justify; text-indent:3em;}
}
</style>
</head>
<body>
<header>
<h1>Titulo Principal</h1>
<h2>Titulo 2</h2>
<h3>titulo 3</h3>
</header>
</p><p>Nulla a sem arcu. Ut eleifend lectus in suscipit vulputate. Nulla diam nibh, malesuada sit amet interdum sit amet, dictum vitae diam. Proin a malesuada purus, nec congue orci. Duis posuere egestas mauris, id egestas nibh sollicitudin quis. Morbi nec ex eu dui iaculis dictum eu sed dui. Quisque vel sollicitudin risus. Morbi eget elementum neque, vitae vestibulum nisi. Mauris at purus est. Nunc tempor eleifend faucibus. Fusce eget libero congue, porta turpis et, sodales augue. Suspendisse tincidunt nunc ac convallis iaculis. Nam sit amet ex ac nunc laoreet tincidunt. Aliquam tempus auctor scelerisque. Nam pulvinar nibh at euismod aliquam. Aenean libero dolor, lacinia iaculis sodales eu, blandit eget risus.

</p><p>Praesent eget dolor ut arcu commodo scelerisque. Nullam luctus, tortor sed pellentesque commodo, odio dolor rhoncus lorem, et vestibulum urna ipsum id erat. Pellentesque velit nibh, viverra quis varius sed, rutrum et tellus. Morbi tempor pharetra efficitur. Sed id tincidunt arcu, nec lacinia arcu. Nam congue libero ac pellentesque pharetra. In vel aliquet lorem. Nam vitae dolor accumsan, auctor sem eget, dapibus elit.

</p><p>Ut tempor elementum lorem, eu condimentum odio. Nullam molestie tellus sit amet quam euismod rutrum. Nulla in felis commodo, tristique nunc eu, tristique nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id efficitur lorem. In faucibus nunc in eros tincidunt, id cursus sem cursus. Nulla vehicula, nibh non egestas vehicula, enim ipsum mollis neque, sed eleifend nulla purus id mi. Proin at vestibulum nibh. Duis dapibus eget diam vulputate eleifend. Vestibulum ac diam eget arcu tempor commodo. Phasellus sed ipsum eget enim aliquam lobortis. In vulputate faucibus massa eget tristique. Aliquam sit amet dolor felis.

</p><p>Nulla non urna nec tellus faucibus lobortis eget id lectus. Ut porttitor tellus eget sodales molestie. Quisque malesuada diam in viverra efficitur. Proin condimentum suscipit libero. Nulla lobortis erat risus, eget facilisis odio consequat sit amet. Pellentesque lobortis feugiat commodo. Proin aliquet, metus commodo viverra elementum, nunc ante convallis diam, a euismod magna felis quis nisi. Fusce quis lectus in lacus dignissim maximus nec vulputate felis. Praesent mauris justo, dignissim sed leo porta, vestibulum egestas elit. Mauris egestas pretium lorem, at placerat nibh scelerisque ut.

</p><p>Quisque dignissim justo vel iaculis eleifend. Vestibulum ultrices condimentum imperdiet. Aenean elit nisi, volutpat sed sodales eget, fermentum non lorem. Fusce vel pellentesque ex. Proin at velit sed turpis vulputate ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet scelerisque enim, vitae malesuada magna. Quisque porttitor, lorem elementum accumsan ornare, risus urna mattis ipsum, eu semper sapien libero vitae mi. Aliquam sit amet molestie enim, vitae tempor neque. Praesent eget odio quam. 
</body>
</html>

css css3

asked by anonymous 06.02.2018 / 14:33

2 answers

0

Use z-index in the header. Or just insert a <img> tag instead of background-image into the element. I particularly think doing with a <img> tag would be infinitely easier.

<html>
<head>
<title></title>
<style>
@media screen {
    header::before
    {
        content: "";
        background-image: url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
        background-size: 100% 100%;
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    header {
        width: 100%;
        height: auto;
        padding-top: 0em;
        display: block;
        margin: 0;
    }
    h1, h2, h3 {
        text-align: center;
        margin:0;
    }
    p {
        text-align: justify;
        text-indent: 3em;}
    }
}
@media print {
    header::before, header
    {
        z-index: 1;
    }
    header::before {
        content: url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
        width: 100px;
        height: 100px;
        display: block;
    }
    header {
        width: 100%;
        height: auto;
        padding-top: 0em;
        display: block;
        margin: 0;
    }
    h1, h2, h3 {
        text-align: center;
        margin:0;
    }
    p {
        text-align: justify;
        text-indent: 3em;
    }
}
</style>
</head>
<body>
<header>
<h1>Titulo Principal</h1>
<h2>Titulo 2</h2>
<h3>titulo 3</h3>
</header>
</body>
</html>

06.02.2018 / 16:40

Display mysql query results in Master / Detail php and pdo presence list

score 1 · Accepted Answer

Since you're working with background , then you need to set the width of header:before to 100% . For the image not to get huge, just use background-size with px instead of % .

To position folder use background-position and background-repeat to prevent the image from repeating itself within content.

<html>
<head>
<title></title>
<style>
@media screen {
  header::before{
    content:url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
    content: "";
    background-image:url(https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg);
    
    background-size: 100px 100px;
    background-position:center;
    background-repeat:no-repeat;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    
    display: inline-block;
    /*size of your image*/
    height: 100px;
    width:100%;
  }
  header{
    /* Largura total - Se você omitir ocupará toda a linha */
    padding-top: 20em;
    width:100%; 
    height: auto;
    /*background: #fff url("https://image.freepik.com/vetores-gratis/tux-personagem-com-papel-em-branco-para-o-seu-texto_52478.jpg") 15em -5em no-repeat;
    background-size: 120px Auto;*/
    /*background: none;*/
    padding-top: 0em;
    display: block;
    margin:0;
  }
  h1,h2, h3{text-align:center; margin:0;}
  p{text-align:justify; text-indent:3em;}
}
</style>
</head>
<body>
<header>
<h1>Titulo Principal</h1>
<h2>Titulo 2</h2>
<h3>titulo 3</h3>
</header>
</p><p>Nulla a sem arcu. Ut eleifend lectus in suscipit vulputate. Nulla diam nibh, malesuada sit amet interdum sit amet, dictum vitae diam. Proin a malesuada purus, nec congue orci. Duis posuere egestas mauris, id egestas nibh sollicitudin quis. Morbi nec ex eu dui iaculis dictum eu sed dui. Quisque vel sollicitudin risus. Morbi eget elementum neque, vitae vestibulum nisi. Mauris at purus est. Nunc tempor eleifend faucibus. Fusce eget libero congue, porta turpis et, sodales augue. Suspendisse tincidunt nunc ac convallis iaculis. Nam sit amet ex ac nunc laoreet tincidunt. Aliquam tempus auctor scelerisque. Nam pulvinar nibh at euismod aliquam. Aenean libero dolor, lacinia iaculis sodales eu, blandit eget risus.

</p><p>Praesent eget dolor ut arcu commodo scelerisque. Nullam luctus, tortor sed pellentesque commodo, odio dolor rhoncus lorem, et vestibulum urna ipsum id erat. Pellentesque velit nibh, viverra quis varius sed, rutrum et tellus. Morbi tempor pharetra efficitur. Sed id tincidunt arcu, nec lacinia arcu. Nam congue libero ac pellentesque pharetra. In vel aliquet lorem. Nam vitae dolor accumsan, auctor sem eget, dapibus elit.

</p><p>Ut tempor elementum lorem, eu condimentum odio. Nullam molestie tellus sit amet quam euismod rutrum. Nulla in felis commodo, tristique nunc eu, tristique nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id efficitur lorem. In faucibus nunc in eros tincidunt, id cursus sem cursus. Nulla vehicula, nibh non egestas vehicula, enim ipsum mollis neque, sed eleifend nulla purus id mi. Proin at vestibulum nibh. Duis dapibus eget diam vulputate eleifend. Vestibulum ac diam eget arcu tempor commodo. Phasellus sed ipsum eget enim aliquam lobortis. In vulputate faucibus massa eget tristique. Aliquam sit amet dolor felis.

</p><p>Nulla non urna nec tellus faucibus lobortis eget id lectus. Ut porttitor tellus eget sodales molestie. Quisque malesuada diam in viverra efficitur. Proin condimentum suscipit libero. Nulla lobortis erat risus, eget facilisis odio consequat sit amet. Pellentesque lobortis feugiat commodo. Proin aliquet, metus commodo viverra elementum, nunc ante convallis diam, a euismod magna felis quis nisi. Fusce quis lectus in lacus dignissim maximus nec vulputate felis. Praesent mauris justo, dignissim sed leo porta, vestibulum egestas elit. Mauris egestas pretium lorem, at placerat nibh scelerisque ut.

</p><p>Quisque dignissim justo vel iaculis eleifend. Vestibulum ultrices condimentum imperdiet. Aenean elit nisi, volutpat sed sodales eget, fermentum non lorem. Fusce vel pellentesque ex. Proin at velit sed turpis vulputate ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet scelerisque enim, vitae malesuada magna. Quisque porttitor, lorem elementum accumsan ornare, risus urna mattis ipsum, eu semper sapien libero vitae mi. Aliquam sit amet molestie enim, vitae tempor neque. Praesent eget odio quam. 
</body>
</html>

To force the browser to print the image, use color-adjust