Position the background of the container in the center and keep it

I am trying to create a fixed background header using the following CSS properties:

header {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 300px;
    display: block;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

However, I am facing an issue where the background image is centered based on screen width and height. This results in only the top portion of the image being displayed as the actual background of the header. Additionally, the position of the header image changes whenever the screen height is adjusted, which is not what I intended.

What I want is for the image to be perfectly centered within the header, with the center of the image aligning with the center of the header (without any scrolling). Furthermore, I would like the header image position to adjust only when the header's dimensions or screen width change, without any impact from changes in screen height.

htmlcssbackgroundfixed

Answer №1

For precise centering of an image, you can leverage the vh unit along with some calc() function. Initially, set the center at 50vh, then adjust it to be 150px from the top by calculating 50vh - 150px. Removing cover allows the image to remain fixed relative to the screen height changes, but this may affect the rendering.

I substituted 300px with 100px for demonstration purposes.

.header {
  height: 100px;
  border: 1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
  background-attachment: initial;
  background-position: center;
  margin-top: 20px;
}

body {
  min-height: 200vh;
  margin: 0;
}
<div class="header">

</div>
<div class="header not-fixed">

</div>

Utilizing cover:

.header {
  height: 100px;
  border: 1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
  background-attachment: initial;
  background-position: center;
  margin-top: 20px;
}

body {
  min-height: 200vh;
  margin: 0;
}
<div class="header">

</div>
<div class="header not-fixed">

</div>

The alignment of the first and second images appears identical without using fixed.

To delve deeper into the calculation details, refer to: Using percentage values with background-position on a linear gradient (specifically the section Combining pixel and percentage values).

Answer №2

Experiment by wrapping the image (outside the header div) and the header div, then play around with position relative or absolute to overlay the header on top of the image.

Once you've accomplished that, utilize z-index to move the image further back in the display order.

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

Can you identify the programming language used in this code snippet? - {"html":"<section class="page">

I've been approached to assist with a friend's company website since the original developer seems to have disappeared. Apologies if this question is too basic for this forum, and please forgive me if I am not in the right place to ask it. The m ...

htmlajax

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Steps to transforming a standard array into a multidimensional array

I have a JSON array that is generated after submitting a form using the formSerialize function. Here is an example of how the array looks: [ {"name":"client_management-testmonitoring","value":"0"}, {"name":"client_operations-testmonitoring","v ...

javascripthtmljsonmultidimensional-array

Design a background image that is optimized for both high-resolution retina displays and standard non-ret

Scenario I am working on a web page where I want the background image to be fixed, covering the entire screen or window (excluding tablets and smartphones). The background image has been created using ImageShack. Everything is running smoothly so far. T ...

javascriptjqueryhtmlcssretina

`Trying to conceal the tr elements on button click proves tricky with jquery`

I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...

jqueryhtmlcss

`json object allows for category selection in options`

Hello (please excuse my English), I have the following script: <script type="text/javascript"> $(document).ready(function() { var idPlato = decodeURI(getUrlVars()["idPl"]); var url = "http://localhost/plato-datos.php?idPla="+idPl ...

javascriptjsonajaxhtmljquery-mobile

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

htmlangulartypescript

The pure css overlay does not display correctly on Chrome

Could you take a look at the link provided below (just widen the result window a bit) and let me know why there are white lines on top and on the sides of the boxes when the hover overlay is fully loaded? Even when I use a background image for those divs, ...

cssgoogle-chromehoveroverlayopacity

Minimize the screen dimensions and adjust the margins accordingly

Having a problem with responsive margins? Take a look at this site as an example: When I shrink the screen size, the margins decrease and smoothly transition from 4 to 2 columns. In my case, it does something similar but the issue is that the margin does ...

htmlcsswordpress

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

jquerycssjquery-uimodal-dialog

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Safari browser not supporting CSS @property --rotate functionality

This card's animation is functioning well in Chrome, but it is not compatible with Safari and Mozilla Firefox. I suspect the issue lies with the @property --rotate, as it is no longer supported by Safari. Therefore, I am searching for an alternative ...

htmlcssperformanceanimationcss-animations

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

htmlcssresponsive-design

Achieving this result in HTML using a jQuery accordion component

Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion. The content should load when the page loads ...

javascriptjqueryhtmlcssjquery-ui-accordion

The function replaceState() is unable to create a history state with a URL in a document that has a different origin

In my main.js file located in required/javascripts on my server, I have the code window.history.replaceState(null, null, 'about');. On the about page (located at the root of my server), there is a link that uses window.history.replaceState(null, ...

htmlhtml5-history

Determine the overall sum of all items

Utilizing data fetched from my SQLite database, I'm utilizing *ngFor to display a comprehensive list of items with their respective names, prices, amounts, and totals. How can I calculate the grand total and display it at the bottom of the list? chec ...

htmlangularsqliteionic-framework

Utilizing SVG elements for interactive tooltips

Can the < use > element show the rect tooltip on mouseover in modern browsers? Refer to 15.2.1 The hint element. <svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol i ...

javascriptcsssvgtooltip

Converting an HTML form with empty values into JSON using JavaScript and formatting it

While searching for an answer to my question, I noticed that similar questions have been asked before but none provided the solution I need. My situation involves a basic form with a submit button. <form id="myForm" class="vertically-centered"> ...

javascriptjqueryhtmljson

The close button within the modal is malfunctioning even with the implementation of the on() function

My "show more" button triggers the modal to pop up, but when I click on the X button in the top left corner, it doesn't close as expected. However, clicking outside of the box or pressing the "esc" key does work. I suspect that the issue lies with th ...

javascriptjquerycssbootstrap-5

Support for Arabic in database, PHP, and JavaScript

After inputting an Arabic comment into a textarea on the site, it displays correctly as "عربي" and is successfully sent to the database. However, upon refreshing the page, the text appears garbled: "عربÙ�". I attempted to directly enter s ...

phpjavascripthtmlajaxmysqli