CSS: How to insert an image element centered on paper?

Asked

Viewed 64 times

0

Personal how can I insert a centralized image element as logo into an html document, to set format "@media print"?

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

<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

  • The only problem is that by default no background is printed at the time you have it printed. The default printer ignores all background images and colors... Just go to any page and do a test by pressing Ctrl+P and see if the Background appears, by default it doesn’t usually appear, unless the user has made the configuration to do so.

  • Possible duplicate of Print page with Background

2 answers

1


How are you working with background, then you accurate define the width of header:before as 100%. To make the image not huge, just use the background-size with px instead of %.

To position folder use background-position and background-repeat to prevent the image from repeating inside the 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

  • The only problem is that by default no background is printed at the time you have it printed. The default printer ignores all background images and colors...

  • @hugocsl is true. I changed the code to force the browser to print the image.

  • @britodfbr Do not forget to replace @media screen for @media print when testing. I left as screen to display the result on the screen.

  • @Valdeirpsr ok.

  • perfect! thank you very much. But I have a doubt. Because it is used the background-size and the (widht + height) in the same object?

  • The height and width serve to assign the width and height of the content where the image will be displayed. When we define the width larger than the image size, we can adjust/position where the image will be inserted into this "element". The background-size will just set the image height and width, only.

Show 1 more comment

0

Use z-index in the header. Or just enter a tag <img> instead of background-image in the element. I particularly think to do with a tag <img> it 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>

  • unfortunately the html document cannot be changed. Then inserted tags will be out of the question. :(

  • Is there any "technological" reason for this or is it business rule?

  • business rule.

  • Ah, I understand the problem.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.