Unable to adjust the position of the logo image

I cannot figure out how to center the logo over a video background. Any suggestions on what I might be doing wrong? I've tried changing the "position" to relative and absolute, but without any success.

#hero video {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 5;
  object-fit:cover;
  display: block;
}
header {
  position: absolute;
  background: none;
  object-position: center;
  z-index: 20;
  opacity: 0.7;
  align-items: center;
  display: block;
  height: 200px;
}
<div class="texture"></div>
  <div id="hero">
    <video preload="auto" autoplay muted loop id="myVideo">
      <source src="pls.mp4" type="video/mp4">
    </video>
</div>

<header class="logo">
  <img src="logo.jpg" height="300px" alt="logo"/>
</header>

htmlcssbackground

Answer №1

Simply insert these three statements

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

Within the specified area

header {
    position: absolute;
    background: none;
    object-position: center;
    z-index: 20;
    opacity: 0.7;
    align-items: center;
    display: block;
    height: 200px;
  }

Answer №2

Give this a try:

header {
  top:0;bottom:0;right:0;left:0;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content:center;
}


#hero video {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 5;
  object-fit:cover;
  display: block;
}
header {
  position: absolute;
  background: none;
  top:0;bottom:0;right:0;left:0;
  z-index: 20;
  opacity: 0.7;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content:center;
}
<div class="texture"></div>

  <div id="hero">
    <video preload="auto" autoplay muted loop id="myVideo">
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
    </video>
    
</div>

<header class="logo">
  <img src="https://i.sstatic.net/8aQ0S.png" height="50px" alt="logo"/>
</header>

Answer №3

#hero video {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 5;
  object-fit:cover;
  display: block;
}
header {
  position: absolute;
  background: none;
  object-position: center;
  z-index: 20;
  opacity: 0.7;
  align-items: center;
  display: block;
  height: 200px;
  left:50%
}
<div class="texture"></div>
<div id="hero">
  <video preload="auto" autoplay muted loop id="myVideo">
    <source src="pls.mp4" type="video/mp4">
  </video>
</div>

<header class="logo">
  <img src="logo.jpg" height="300px" alt="logo"/>
</header>

You can experiment with centering it using the left property.

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

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

htmlcssimage

How to Use PHP to Submit Form Information

I am a beginner in PHP and I need help with sending form details to an email address. I have tried looking for solutions online but I keep running into the same issue - when I submit the form, it downloads the PHP file instead of sending an email. Below i ...

javascriptphpjqueryhtmlforms

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

javascriptcss

the styling gets disrupted by the addition of grid columns

Looking for help with aligning and spacing three sets of strings in a single line while maintaining grid columns intact, even when window size is reduced. Currently experiencing alignment issues like this: https://i.stack.imgur.com/iqlam.png Tried removi ...

htmlcssangular-bootstrap

Aligning images in columns

I need help aligning a set of images using CSS. Currently, they are stacked top to bottom and I want them to be placed left to right instead. In simpler terms: 1|2|3|4 5|6|7|8 vs 1|3|5|7 2|4|6|8 #photos { line-height: 0; -webkit-column-count: ...

jqueryhtmlcss

Tips on how to ensure that an onClick JS function only runs when radio buttons are selected

I have implemented the formslider library for a form on my website. In the demo, the slide transitions to the next set of questions based on a click event triggered by radio buttons (answers). However, when I attempted to include checkboxes for users to s ...

javascriptjqueryhtml

Counting Clicks with the Button Counter

I'm having an issue with my jQuery code that is supposed to count button clicks - it stops after just one click. I need help fixing this problem. $(function() { $('.btn').click(function() { $(this).val(this.textContent + 1); }); } ...

javascriptjqueryhtml

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...

javascriptjqueryhtmlcss

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

phphtmlformsemailcheckbox

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...

htmlcsssassscss-mixins

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

htmlcss

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css? element.style { "existing css;" } I'm trying to achieve the following result: element.style { existing css; opacity: 0; pointer-events: none; } But current ...

javascriptcss

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

htmlcss

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

Words placed in the middle of the picture

<div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">New Product</span> </div> I require this specific layout to be responsive. Could you please provide instructions on achieving this? ...

htmlcssimagesass

Automatically expanding PrimeNG Turbotable rows

I am using a PrimeNg turbotable that has a row expansion feature enabled. I am looking for a way to automatically expand the rows by default when the table loads. Shown below is my code: HTML <p-table [columns]="cols" [value]="cars" dataKey="vin"> ...

htmlangulartypescriptprimengprimeng-turbotable

Personalizing MaterialUI's autocomplete functionality

Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...

javascripthtmlcssreactjsmaterial-ui

What could be causing this code to malfunction in Internet Explorer 7?

Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...

htmlcssinternet-explorer-7

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure: <table id="table"> ...

javascriptjqueryhtmlcss