Display a single image at the center of the screen, regardless of resolution

I have been attempting to replace the default OHS index.html with an image measuring 1640px x 248px, and I want it to be centered both horizontally and vertically on any screen it is displayed on.

For example, whether it's a 4K screen, 1920x1080, 1024 x 768, tablet, phone, etc.

I have tried numerous "solutions," but none seem to work effectively on all types of displays. I can create HTML and CSS that look good on a PC, but when viewed on a phone, parts of the image are cut off on the sides.

The content contains only an image; there is no text involved.

Thank you

cssimage

Answer №1

To centrally align an image both horizontally and vertically, you can utilize the flex property.

<style>
html, body {
  height: 100%;
}
.center-image {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
</style>
<body>
  <div class="center-image">
    <img src="..." alt="">
  </div>
</body>

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 the method for altering the look of a button using JavaScript?

As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...

javascriptjqueryhtmlcss

How to align columns from right to left in Bootstrap 4

I've been trying to customize a Bootstrap 4 example, but I'm struggling to change its direction from right to left. .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; ma ...

cssbootstrap-4right-to-left

Safari alters the header color on mobile devices

Debugging this issue has been quite challenging - the number at the top of the page appears in white before changing to a dark grey on iPad and iPhones running Safari. Why is this happening?! It functions correctly on all other devices! Check out www.col ...

csssafariheader

React Hamburger Menu not working as intended

I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLink ...

javascriptcssreactjsuse-statehamburger-menu

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

Auto adjusting textarea height as per content length

Is there a way to adjust the height of the text area based on the content entered by the user? I want it to automatically increase as the user types and decrease if they delete content. ...

jqueryhtmlcss

Simple HTML and CSS exercise for beginners to grasp the concept

I'm looking to modify the layout of a specific webpage at based on the following instructions: First, insert this link within the <head> <link rel="stylesheet" href="https://trafficbalance.io/static/css/sdk/sdk.css"> -next, add th ...

javascripthtmlcss

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value

I have encountered a challenge while working on a react file-upload component. The issue at hand is relatively simple - I aim to display an icon corresponding to the file extension for each uploaded file. These icons are loaded through css as background im ...

javascriptcssreactjsimageasynchronous

When the Model popup is activated, it is essential for elements to have an adequate color contrast

Our team is utilizing the axe dev tool for accessibility testing. We encountered an issue where elements behind a model popup (Kendo React model with position: absolute) were displaying insufficient color contrast errors. Upon changing the absolute positio ...

javascripthtmlcssreactjskendo-react-ui

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

cssflexboxoverlaptimeline

Unable to choose an option from the panel

I am currently working on a menu and panel setup (you can view the demo here: http://jsfiddle.net/vals/j2LrQ/1/). The visibility of the panel depends on the selected item from the menu. However, I am facing an issue where the panel disappears when I move ...

jqueryhtmlcssweb

When the window is resized, the text and images become jumbled and distorted

As a beginner in CSS, I am encountering an issue where the text and images on my website get distorted when I resize the window. How can I resolve this? HTML <img src="images\titles_03.jpg" class="tt1" > <img src="images\titles_05.jpg ...

htmlcss

Encountering an error while trying to load a CSS file in a React project using webpack due

I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package. Following the instructions provided, I included the css-loader and style-loade ...

javascriptcssreactjswebpack

How to use jQuery Animate to create a step-by-step animation with image sprites?

I'm working on creating an image sprite using jQuery and I'm curious if it's feasible to animate it in steps rather than a linear motion. I initially tried using CSS3 animations, but since IE9 is a requirement, the animations didn't wor ...

javascriptjqueryhtmlcssjquery-animate

Problem with image title in jQuery mobile

My code seems to be having an issue where the title does not display completely when hovering over it. For example, if the title is set as "The Value", only "The" is shown and not "The Value". Can anyone help me identify the mistake? Thank you in advance ...

javascriptjqueryhtmlcssjquery-mobile

Is my class more specific than my ID when using the parent ID and descendant combinator in CSS specificity?

Could it be that my logic is flawed and this CSS rule is actually valid? Let's break it down: My ID is more specific than my class. Furthermore: My ID is more specific than the parent ID. However: Is parent ID, when combined with the descenda ...

csscss-selectorscss-specificity

Guidelines for implementing a seamless translation effect with CSS3

CSS: .horizon { position: absolute; top: 380px; width: 1800px; height: 50px; background: url(images/road.png) repeat-x; -webkit-animation-name: prop-600; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: i ...

javascripthtmlcss

Unable to locate the Bootstrap CSS file when deploying on PythonAnywhere

I recently created an admin panel that integrates with a database. To automate the process of generating the admin panel, I utilized flask-admin. Running the server locally on my PC displayed the bootstrap swatch correctly and everything worked seamlessly. ...

pythoncssflaskbootstrap-4flask-admin

The top content above the Bootstrap navbar fails to remain fixed in place

Seeking assistance with a Bootstrap 4 navbar and header setup. The goal is to have the navbar stick to the top while making the header disappear on scroll. In my functions.php file, I've enqueued Jquery for this project. Below is the CSS found in st ...

jquerycssbootstrap-4wordpress-theming

Is it better for a browser to request only one stylesheet or all CSS files (including those imported in the main stylesheet)?

When attempting to use the "@import" rule to import multiple CSS files into a single "style.css" file that is then linked in the main HTML file, I noticed only the styles from the "style.css" file were being applied when inspected using Firebug. I am curio ...

htmlcss