html / CSS Center image in div with primary image as background

I am encountering a unique issue that I haven't come across in my search so far. My objective is to create an HTML page where each background image div represents one page for clean printing.

.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>

Despite trying various methods, including placing it within a table, I have not been able to achieve the desired outcome of centering or aligning the image at the bottom. Any assistance would be greatly appreciated.

htmlcss

Answer №1

If you're looking to center your div inside the container, I have a suggestion for you. In the snippet below, I've included a CSS rule that adds style attributes to the container, ensuring its content is vertically and horizontally centered using display:flex;

When it comes to printing HTML pages, it's important to note that HTML/CSS may not be the best choice as they lack tools for handling publishing details like page number or size accuracy. While you can control content size, precision can be lost, especially beyond a certain page limit.

In this case, I've considered the div .thirdBackgroundPage as filling an A4 page by assigning it dimensions in mm. Let me know if this aligns with your requirements.

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

/*Style attributes 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%;*/
  /*Adjusted for image size*/
  height: 100px;
  width: auto;
  display: block;
  margin: auto;
}
<div class="thirdBackgroundPage">
 <img class="icobp" src="images/imageCenterOfBackgroundPage.jpeg" />
</div>

Answer №2

If you want to customize the printing layout, you can utilize @media print to specify which content to include in the printout. To center a specific element when printing, you can also apply CSS within @media print and use display:none for elements you don't want to be printed. Additionally, adjusting display:block or display:inline-block may be necessary to achieve the desired printing result. Hopefully, these tips will assist with your printing needs.

@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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing me to have difficulty importing any of the images located in the public folder?

I'm currently tackling the NextJS framework, and I'm having trouble importing images that are stored in the public folder. Despite being able to navigate through folders, the images aren't displaying as expected. Here is the import line and ...

htmlreactjsnext.jstailwind-cssreact-fullstack

when primefaces components are enclosed within blocks

I possess a bean that includes an integer variable. I am desiring to accomplish the following code: if(value==1) <div class='abc'/> else if(value==2) <div class='mno'/> else <div class='xyz'/> .. ...

htmlif-statementdatatableprimefacesconditional-statements

Issues with HTML Labels disrupting Bootstrap Grid Columns layout

Here is the HTML code I am working with: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> @*@Html.LabelFor(s => s.BasicInfo.FirstName)*@<label>First Name:</label> </div> <div clas ...

htmlcsstwitter-bootstraprazor

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

I am in the process of upgrading my project from polymer .5 to polymer 1.0. After installing the new version of the polymer library, iron element, and paper element, I encountered the following error: polymer-micro.html:63 Uncaught TypeError: prototype ...

javascripthtmlvisual-studio-2012polymernuget-package

Issue arises when trying to insert an image avatar onto a globe in three.js

I have successfully implemented a rotating 3D globe using three.js with the code provided below. HTML <canvas id="canvas"></canvas> JS let camera; let renderer; function main() { const canvas = document.querySelector('#ca ...

javascriptcssthree.js

The Angular overlay panel remains open consistently

I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another ove ...

htmlcssangulartypescript

The custom CSS I have created does not take precedence over the Bootstrap CSS

I'm struggling to understand why my custom CSS file isn't able to override the Bootstrap CSS. I know that my new CSS class should have higher priority than Bootstrap's, but for some reason, it's not working as expected. Here's the ...

htmlcssbootstrap-4

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

The HTML webpage is optimized for desktop and tablet viewing, but has difficulty displaying correctly on mobile phones

Just starting out with HTML and created a website using HTML and CSS that is now live. It looks good on desktop and tablet (iPad) but not so great on mobile devices. Tried different solutions, including viewport settings, to fix the issue with no success. ...

htmlcssmobile

jQuery issue: Inability of "Read More" span to reappear after clicking "Read Less"

Currently in the process of creating a portfolio website that showcases project descriptions with an excerpt, revealing full details upon clicking "Read More." My experience with jQuery is limited, but I managed to implement functionality where clicking "R ...

javascriptjqueryhtmlcss

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

javascriptcssfirefox

Can you please specify the type of values being entered as input?

Query: How do I identify the data type of the value entered in an input field? Whenever I use typeof, it always returns string unless the string is empty. I searched various forums extensively but couldn't find a solution. Can someone assist me with t ...

javascripthtml

Updating the text input value in a database with PHP upon button click

Here is a breakdown of what has been implemented so far: The database table is named adhar_card. Below is the structure image for reference (Adhard_card_id serves as the primary key). https://i.sstatic.net/8j4m6.jpg Clicking on the verify button will cha ...

javascriptphpjqueryhtmlajax

Inject data from ajax into the body of the html document

Is it possible to retrieve values from an ajax call and insert them into the body of an HTML document? Here is an example: function check() { $.ajax({ url : '/check', datatype : 'json', async ...

javascriptjqueryhtmlajax

jQuery can add scrolling buttons to a webpage

I have been trying to create a list that can be scrolled through by using buttons, while also having a visible and functional scrollbar. However, I am struggling to edit my code in a way that allows both features to work simultaneously. It seems like I can ...

javascriptjqueryhtmlcss

What is the best location to place responsive mixins within Bootstrap 4 SCSS?

When it comes to adding responsive mixins in Bootstrap 4, where is the best place to place them? I've experimented with putting them in _custom.scss and mixins.scss, but unfortunately, they do not seem to work. I am utilizing the built-in mixins provi ...

twitter-bootstrapcsssassbootstrap-4

Displaying various results using a range slider

I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out. My goal is to have the text "590" display as 5.9 times the value ...

javascriptjqueryhtmlcss

Display a switch icon based on input created by the user

I've been struggling to implement a toggle button for user-generated input, specifically using a Font Awesome toggle button. Here is the link to my codepen: http://codepen.io/lucky500/pen/bdpzbd along with the code snippet: <div id="list" class= ...

javascriptjqueryhtmlcss

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

Angular: sending the user input to the component

I'm trying to link the value of an HTML input field to a variable 'numToAdd' in my component, and then increment the 'numToAdd' variable by 1. However, I'm facing difficulties passing the input value to the component variable. ...

htmlangulartypescript