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

What is the best way to load specific CSS in an rhtml file?

In the world of website development, we often find several pages that are generated from the same layout.rhtml file. Along with a global css file, each page may also have its own unique css file - such as page1.css for page1.rhtml and page2.css for page2.r ...

cssruby-on-railsruby

A guide on altering the color of a badge through programming

I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...

htmlcssangulartypescript

Dynamic class name changes in Angular.js based on JSON object

I am trying to dynamically change the class of an <li> element based on the category value I am getting, but for some reason the class name won't update. Here is the code snippet: <div id="content"> <ul id="container" ng-controller ...

javascriptjqueryhtmlangularjsjson

Having difficulty retrieving data from an HTML file using HTMLEditorKit with Java

Within my HTML code, I have tags structured like this: <div class="author"><a href="/user/1" title="View user profile.">Apple</a> - October 22, 2009 - 01:07</div> I am aiming to retrieve the date, "October 22, 2009 - 01:07" from e ...

javahtmlparsing

In Internet Explorer, regardless of how much scrolling occurs, the document.body.scrollTop property will consistently be

While moving the mouse, I'm showing the value of document.body.scrollTop in the status bar. However, I have noticed that this value is consistently 0 in Internet Explorer. Why is it always 0 in IE? Is there an alternative method to determine how far t ...

htmlcss

Preventing page navigation in JavaScript: Why it's so challenging

I am encountering an issue with a link element that I have bound a click event to (specifically, all links of a certain class). Below is an example of the link element in question: <a id="2" class="paginationclick" style="cursor: pointer;" href=""> ...

javascriptjqueryhtml

Arrange array with objects in order of most recent date

I am in the process of developing a chat application where all contacts are stored as objects in one array: var contacts = [{name: "Ruud", age: 20},{name: "Elke", age: 17}]; Next, I have the chat messages for each contact saved in an array of objects: v ...

javascripthtmlarraysobject

What could be causing my browser to not respond to the JavaScript function for clicking?

I have been struggling to get the images on my browser to change when I click on them. Despite my efforts, I haven't found a solution yet... I've experimented with changing the variables to ".jpg" and also tried removing them altogether. var ...

javascripthtml

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

Passing parameters from an HTML form using PHP

I have a background in C# and am still relatively new to PHP. I have an HTML form that submits its values to the PHP file below, but for some reason, the values are not being set. Can you help me identify what I'm doing wrong? <?php include(' ...

phphtml

The jQuery hide and show functions lack precision and are too indiscriminate, requiring a more targeted approach

I am designing a unique contact card that captures a user's name and description from an <input> field and appends the input information into a <div> element. This is the flow I am aiming for... User inputs their first and last name alo ...

javascriptjqueryhtml

Struggling to align nested grids in the center

I'm currently following a mobile-first approach in designing my website. The entire website is contained within one main grid, and I also want to include smaller grids that will serve as links to other HTML pages. I created a sample nested grid but am ...

javascripthtmlcss

The function of JQuery .click() is successful when used on a local machine, however it is not functioning

I am facing a puzzling issue. The code in question functions perfectly on my local server, but once I uploaded it to my hostgator server, a specific function no longer executes. When I set a breakpoint in the Firefox debugger, I noticed that the function i ...

javascriptjqueryhtmlcss

Tips for positioning a label at the top of a table row in an asp.net C# application

I am facing an alignment issue in my asp.net page with a table that contains a label and a textbox. Despite trying various methods, the label consistently displays at the bottom of the row. How can I ensure that the label is aligned to either the center or ...

c#htmlcssasp.netcode-behind

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

javascriptphphtmldatabase

I'm encountering an issue with the "z-index: -1" property in React

After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research ind ...

javascriptcssreact-nativeexpo

Choosing multiple options in a select tag leads to an error

I am facing an issue with my array and select multiple fields. I want all the select options to be automatically selected using the array ID when the file is loaded. Here is my array: Array( [0] => 3 [1] => 5 [2] => 9 ) This is what my select ...

phphtml

An alternative to Beautiful Soup for Python 3.2

Looking to create a web crawler for extracting information from various web pages, I discovered Beautiful Soup which seemed like an excellent tool. It allows me to parse entire documents, create dom objects, iterate through them, and extract attributes sim ...

pythonhtmlweb-crawler

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

javascriptjqueryhtmlvalidationforms

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

javascripthtmlcsscanvasbootstrap-4