Struggling to align an image in the center of a div on top of another image

I am attempting to center a logo on top of a moving image that scrolls through (unfortunately, the movement isn't visible on jsfiddle). I have tried using <center> tags, but they do not work. Adding margin: auto; does not properly center the image either, and I am puzzled by this.

#hb_title {
  background: url('https://cdn.shopify.com/s/files/1/0580/2885/products/the-prison-server-logo_4d5b6eb2-d630-43d9-b8c0-bd024646ef12_400x400.jpg?v=1510041886');
  background-repeat: no-repeat;
  width: 50%;
  margin: auto;
  height: 60%;
}

#header_block {
  background: transparent url('http://i.imgur.com/1tyMljX.jpg') repeat fixed 0% 0%;
  width: 100%;
  height: 139px;
  width: 100% border-bottom: 2px solid #2ECC71;
  text-shadow: 0px 1px 0px rgb(39, 33, 59);
  animation: bganim 20s linear infinite;
}
<div id="header_block">
  <div id="hb_title">
  </div>
</div>

The image in the URL has adjustable pixel dimensions, and I acknowledge that it is basic. This exercise serves as practice for me.

My experimentation with the code is being conducted on JSFiddle.

htmlcss

Answer №1

To achieve a centered effect in CSS3, you can employ a clever technique. By applying position: relative; to the inner box and setting top: 50%;, you can then adjust for half of the container's height using transform: translateY(-50%);. To ensure precise pixel calculations and avoid browser inconsistencies, add perspective(1px). Here are the three lines of code to include in your CSS:

#hb_title {
  background: url('https://cdn.shopify.com/s/files/1/0580/2885/products/the-prison-server-logo_4d5b6eb2-d630-43d9-b8c0-bd024646ef12_400x400.jpg?v=1510041886');
  background-repeat: no-repeat;
  width: 50%;
  margin: auto;
  height: 60%;
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

#header_block {
  background: transparent url('http://i.imgur.com/1tyMljX.jpg') repeat fixed 0% 0%;
  width: 100%;
  height: 139px;
  width: 100% border-bottom: 2px solid #2ECC71;
  text-shadow: 0px 1px 0px rgb(39, 33, 59);
  animation: bganim 20s linear infinite;
}
<div id="header_block">
  <div id="hb_title">
  </div>
</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

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the ...

javascripthtmlcss

What method can be employed to eliminate choice selection lacking any value?

Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...

javascriptjqueryhtmlransack

Infusing JavaScript with vibrant images

I am currently facing an issue where I am trying to insert images with JavaScript attached to them. Oddly enough, it seems to work fine on Firefox but the images or icons do not display on Internet Explorer. This is how I have written the code: <a hre ...

javascripthtmlimage

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

How can I extract and display chosen values from multiple dropdown menus in designated text boxes based on their unique identifiers?

A website for evaluating car values is in the works, using a combination of PHP, MYSQL, JQUERY, and JavaScript. The database includes 3 tables: Table "car_make": id make 1 BMW Table "model": model_id model_name make_id 1 M3 1 Table "ca ...

javascriptphpjqueryhtml

Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how ...

htmlcssbootstrap-5

[php][html] stuck on trying to solve this error

Any help in figuring out the error on line 37 would be greatly appreciated. I've tried moving the ""; after echo and putting the entire PHP code in an img class="profilePic" src="http://i.imgur.com/ZICYW5z.png"/> and then using echo for the name (I ...

phphtml

The new Facebook login button in my app seems to be glitchy as it fails to redirect users to the appropriate page after

I am working on a web application and have successfully integrated Facebook login from developers.facebook.com. However, I am facing an issue where after the user logs in with their Facebook credentials, they are not redirected to my application. Additiona ...

javascriptfacebookhtmlfacebook-graph-api

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

javascripthtmlserver-side

css table cells with overflow

I need help with a table where I have text in one of the td cells that goes beyond the right border and wraps to the next line. What I want is for the overflowing text to be hidden when it reaches the border, showing only the last 3 visible characters repl ...

cssoverflow

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova

Tips for building a task list using JavaScript only

Is it possible to create a to-do list using only JavaScript in an HTML file with a single div tag? Here is my HTML file for reference: example Here is the structure of my HTML file... <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmllistdomevents

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

htmlpython-2.7selenium-webdriverdownload

Why is there excessive whitespace appearing in Internet Explorer 9?

Visit mimictrading.com/index.php When viewed in Firefox, the website displays as intended. However, in IE9, there seems to be a strange space at the top and above the recent topics list. I suspect that it might be related to the 'header' divisio ...

jquerycsslayoutinternet-explorer-9whitespace

Innovative CSS techniques and outdated web browsers

Do you think it's beneficial to incorporate cutting-edge CSS-properties such as border-radius, text-shadow, box-shadow, and gradient into your layout designs today? And how about utilizing values like rgba()? As I explore various web galleries, I not ...

cssbrowser

Exploring the diversity of perspectives through Angular

Currently, I am in the process of integrating multiple views in Angular to address the footer issue on a website that I am constructing. I want to ensure that the information I have been studying and attempting to replicate is accurate. Here is what I have ...

javascripthtmlangularjs

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

javascripthtmlcss

Tips for changing font styles using Polymer

I'm new to working with Polymer.js and CSS. My goal is to have text in todo.item display normally when todo.done is false, and with a line-through style when todo.done is true. I'm considering using CSS for this task, but I'm unsure how to ...

htmlcssrestpolymer

Experience the sleek and intuitive Material Design Lite navigation drawer, inspired by the likes of Google Android

Currently, I am incorporating Material design lite into my website and have found many templates that work well. However, I am looking to make a slight design modification to the navigation drawer. Here is the dashboard template I am currently utilizing: ...

csshtmlmaterial-designangular2-mdl

Tips for preventing Razor from interpreting special characters as HTML code

I'm encountering an issue with special characters displaying as HTML codes on the page I'm working on. The content is retrieved from a database and shown in readonly input boxes. For example, & is displayed as &. How can I ensure that the ...

htmlasp.net-mvcrazor