html / CSS Align image within div, with main image being background

user_18854445 0
Viewed 73

The issue I'm having is a bit different than that I've found thus far the goal is to make an HTML page in which each background img div will be one page, thus when printing it will be clean. Here is what the code looks like.

.thirdBackgroundPage {
  background-image: url("images/firstBackgroundPage.jpeg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.icobp {
  height: 75%;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
}
<div class="thirdBackgroundPage">
 <img class="icobp" src="images/imageCenterOfBackgroundPage.jpeg" />
</div>

With this said, there are other <, div class, so the first image is on the third page for example, where right now with this, it brings the image in the center top, however, I need it dead center or bottom.

I've tested a few things, but to no avail. Tried setting it up within a table, but this does not work either. Any help is welcome.

css html
2 Answers

To manipulate the printing you have to use @media print so you can control which one you just want to print. If you needed to center a spcific element you have to use this code @media print as well.And display:none for the other one you dont want to be printed. sometimes you have to use display:block o display:inline-block to get it to work as well. Hope this will help your issue.

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
.thirdBackgroundPage{
  vertical-align:middle;
  align-items:center;
  page-break-before:avoid;
  page-break-after:avoid;
  page-break-inside:avoid;}
}
<div class="thirdBackgroundPage">
 <img class="icobp" src="images/imageCenterOfBackgroundPage.jpeg"/>
</div>

user_165130010

You already had other suggestions to better center your div inside the container, anyway that's mine. In the snippet below I just added a css rule that will add some style attribute to the container so that its content will be correctly centered both vertically and horizontally via display:flex;

Since you talk about printing html pages, I want to warn you that html/css are still not suitable for that since there are no tools to address publishing details like page number or page size. You can control the content size but it will never be accurate and I could experience myself that i will become inaccurate starting from page 30 maybe..I can't remember in details.

Anyway I considered that div .thirdBackgroundPage as filling an A4 page so I gave it those size in mm. Let me know if I got it wrong.

.thirdBackgroundPage {
  background-image: url("images/firstBackgroundPage.jpeg");
  /*height: 100%;*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}

/*Style attributes I added to the list container*/
.thirdBackgroundPage {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px black;
  width: 210mm;
  height: 297mm;
}

.icobp {
  /*height: 75%;*/
  /*Needed to change this to give the pic a size despite the url fake*/
  height: 100px;
  width: auto;
  display: block;
  margin: auto;
}
<div class="thirdBackgroundPage">
 <img class="icobp" src="images/imageCenterOfBackgroundPage.jpeg" />
</div>

user_12212080
Related