Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly.
Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly.
It seems that @Leeish has come up with a great solution.
Another approach is to utilize the following css styling:
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* adjust for half of the height */
margin-left: -150px; /* adjust for half of the width */
}
When using the HTML code below:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [custom]%;
}
If your image or div has a fixed width or percentage for scaling, it will remain centered with left and right margins set to auto. This question may have already been answered elsewhere, so we recommend looking for alternative solutions.
UPDATE
I am revising my response based on feedback. I created a fiddle demonstrating what I explained earlier. You can view it here: http://jsfiddle.net/P8eDT/. The fiddle contains two divs, one with an image and one without, showcasing how the inner div maintains flexible width, set height, and remains centered. The second div's image is "responsive," matching the width of its container. This approach mirrors the functionality seen on the example site you provided. Additionally, below is the code snippet for the INNER div (containing the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please be aware that older versions of Internet Explorer may not support background-size: cover; thus, you might need a JavaScript fallback. In the past, I have used JavaScript to measure the width and height, setting whichever dimension is longer accordingly.
To achieve a fixed position element in your css, utilize position:fixed. For example, if you have a header with the class .header, and it has a width and height of 800x50, you can implement the following css:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
Edit: If you prefer not to center vertically, consider Leeish's alternative solution.
The code I am working with is shown below: <div class="container"> <div class="col-md-3 calendar"> </div> <div class="col-md-9"> <button></button> (more buttons...) </div> < ...
I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...
After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
This script is designed to pull images from a specific location on an HTML page. images = new Array(); images[0] = new Image(); images[0].src = "images/kate.jpg"; images[1] = new Image(); images[1].src = "images/mila.jpg"; document.write(images[0]); I&a ...
I've encountered an issue with nesting :target pseudoclasses. Currently, I have a section containing an anchor tag. Right now, everything is functioning as intended; when I click on the anchor linking to #Current, it expands the area and displays the ...
I am currently attempting to automate the submission of data into the online forms found on this webpage: Unfortunately, I am unable to determine the specific names of these forms by inspecting the source code. I have tried using the requests python modul ...
How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...
I attempted to remove my links individually from the div id="wrapper", but unfortunately have encountered an issue while doing so: window.onload = function () { setInterval(function () { var wrapper = document.getElementById("wrapper"); var my_l ...
There are certain characters, like ordinal 22 or 8, that do not appear correctly in HTML (when using Chrome for example when copying and pasting them into this 'Ask question' editor; assuming utf-8 encoding). How can I identify which characters a ...
Currently, I have a range slider that goes from 0 to 100, with the current value set at the maximum of 100. My goal is to set a limit of 50, so that the slider can only be moved between 50 and 100, and not from 0 to 50. I've created a jQuery handler ...
I'm experiencing some difficulties trying to set up a login for my website. I have a user registered in my database with the email: [email protected] and password 123. The issue arises when I attempt to use the POST method, as it returns the fo ...
I am dealing with an array of employees who are assigned tests by a Lead. When tests are being assigned, the selected employee is allocated correctly. Upon review, the Lead can easily see which test is assigned to each employee. However, when the table is ...
Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...
Looking for help with adding a custom footer to my WordPress theme. I have successfully uploaded my static website here, and now I am in the process of making it dynamic. I have added my primary menu to WordPress, but I am unsure of how to exactly add a fo ...
How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click After Click This is my code: <ActiveLink activeClassName=" ...
Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...
I am currently working on an attendance system using CodeIgniter. I have a list of checkboxes and I have successfully managed to insert the checked data into the database. However, I am now trying to figure out how to insert the unchecked data into the dat ...
Despite encountering similar or potentially identical questions, I have attempted the suggested solutions without success. My aim is to design a table that centers text both vertically and horizontally, ideally using flex. However, the structure of the ta ...
I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image. ...
<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...