Maintaining image ratio on the entire screen

I am in search of a way to create a webpage that includes the following elements from top to bottom:

  • Full-screen width image/background-image (maintaining aspect ratio)
  • Navigation bar (aligned at the top right of the image)
  • Some text
  • Another full-screen image (similar to the first one)
  • Footer

The challenge I am facing is if I use background-image, I have to specify the image height in pixels. However, when I use img tag, I can only make it work by using absolute positioning, which doesn't allow me to stack the divs on top of each other.

Sorry for the hastily put-together image, I hope it gives you an idea of what I am trying to achieve.

https://i.stack.imgur.com/Io81E.jpg

htmlcss

Answer №1

In order to maintain the usage of the img tag, your "header" elements should be positioned over the content using the absolute position, not by positioning the container of the img absolutely:

header {
  position: absolute;
  width: 100%;
  background: rgba(0, 255, 255, .5);
  line-height: 75px;
  text-align: center;
  font-size: 3em;
}
div img {
  width: 100%;
}
<header>Logo & Nav</header>
<div>
  <img src="http://lorempixel.com/1000/500" alt="">
</div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quam, temporibus tenetur qui, sed magni. Praesentium, veritatis perferendis qui? Et accusantium, dicta natus libero iste atque voluptatem est. Dolore, consectetur.</div>
  <div>Eius obcaecati itaque assumenda fuga quam necessitatibus nam consectetur ab velit nostrum minus maxime ex temporibus autem iure, rem ea nihil totam sapiente perferendis praesentium ullam labore amet corrupti! Numquam!</div>
  <div>Esse accusantium excepturi sint deserunt praesentium repellat eius quibusdam ratione hic, modi blanditiis numquam tempore iusto, nisi dolore! Autem quis cumque mollitia atque perspiciatis vero animi eius quidem itaque enim.</div>
  <div>Deleniti magni ipsum illum odio, rerum ullam praesentium expedita vel impedit vitae ad eveniet voluptatem reiciendis reprehenderit omnis doloremque cumque assumenda, eligendi quas cupiditate sed numquam facere porro accusantium! Aliquam!</div>
  <div>Expedita nisi excepturi repudiandae quod provident animi numquam consequatur quidem, magnam non optio, saepe autem laudantium quis perferendis beatae veniam, quae assumenda deleniti eius cupiditate. Est, beatae deserunt facere magnam.</div>
</div>
<div>
  <img src="http://lorempixel.com/1000/1000" alt="">
</div>

Answer №2

There is no need to set a fixed height for your background-image. By only specifying the width and letting the height remain auto, it will maintain its original proportions.

.background-image {
  background-size: 100% auto;
}

Answer №3

If you want to execute the setup outlined above, there is a method to utilize background-position while still maintaining its dimensions. The text that will be superimposed on top must be positioned absolutely, which is a decision that needs to be considered. Below is the configuration for the top image section, assuming the image has a 16:9 aspect ratio:

.background-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: url('someimg.jpg') center center / no-repeat cover;
}

The percentage for the padding bottom is determined by the width of the viewport, indicating that the height is 56.25% of the 100% width, or 16:9 ratio. Feel free to reach out if you have any inquiries about the implementation process.

Answer №4

.customStyle {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

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

Using JavaScript and PHP to dynamically update a field based on two input values within a row of a table

Currently in the process of developing a dynamic profit margin calculator for a personal project. Overview Data is retrieved from a database table using SQL and PHP After necessary validations, the data is dynamically displayed as rows in an HTML table ...

javascriptphpjqueryhtml

Is there a way to run both PHP and HTML code using the eval function?

Is it possible to execute HTML and PHP simultaneously using the eval function? eval ("<center> this is some html </center>"); The above code does not yield the desired output, so I am considering changing it to: echo ("<center> this is ...

phphtml

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

I am currently working on implementing an ng-repeat loop that includes a dropdown menu for each element. I want the dropdown menu to contain functions that operate on the specific element, requiring access to the index of that element. Below is the code sn ...

javascripthtmlangularjsangular-ui-bootstrap

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

Storing the values of three checkboxes in individual variables to be passed into distinct columns

Below is the HTML code for checkboxes, with a function that limits only three selections: <form class="interestSearchCriteria"> <input type="checkbox" name="walking" value="Walking"> Walking <input type="checkbox" name="running" value=" ...

phpjqueryhtmlajax

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

Recently, I've started revisiting a script I created a while back that checks for changes in a form to prompt a message asking 'Would you like to save your changes?'... One thing that's been on my mind is whether I should store the ori ...

javascriptjqueryhtmlinput

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on rows depending on the device it is ...

cssreactjsmaterial-ui

What's the best way to rearrange Bootstrap cards from a horizontal layout to a vertical layout for improved responsiveness?

I'm currently working with Bootstrap to align two cards horizontally, but I also want to ensure that mobile users can view the cards stacked in a column layout. I've experimented with adding 'flex-direction' in combination with the @med ...

htmlcssresponsivecard

Having trouble getting datatables.net to function properly with JavaScript

I've been experimenting with datatables from http://datatables.net/ Attempting to make it work using javascript, but I'm facing issues. Even when following the example provided on the website, it still shows a blank page. Does anyone have any su ...

javascripthtmldatatables

Reset the text input field when the dropdown menu is set to 'no/other'

CURRENT: Choosing from a dropdown menu with options 'Yes' or 'No'. If 'Yes' is chosen: Display additional dropdowns/inputs for entry If 'No' is chosen: Conceal additional dropdowns/inputs WANT: I am looking to imp ...

javascriptphpjqueryhtmlcss

Guide to modifying the background image color using CSS

Currently, I am attempting to modify the color of an image using CSS. This particular image is a key element in the layout of my website. To get a better understanding, you can view a screenshot of the element here: , and see an example post containing the ...

csswordpressstyling

Design elements using CSS within the <th> tags

When working with HTML tables, the use of a <th> element allows for the implementation of a scope attribute. This attribute serves to indicate whether the header cell is associated with its subsequent column, row, or group. Is it feasible to leverage ...

htmlcsscss-selectorshtml-table

Conceal the overflow from absolutely positioned elements

I've gone through all the similar examples but still struggling to find the correct solution. My issue involves a basic Side Menu that toggles upon button click. Within the menu, there is a list of checkboxes positioned absolutely with the parent con ...

javascripthtmlcssreactjs

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Is there a way to directly convert an HTML page generated using PHP and CSS into a PDF format without the use of libraries? I have come across multiple libraries that can accomplish this task, but I would prefer not to rely on any external libraries and i ...

phphtmlcsspdfheader

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Utilizing JavaScript to implement conditional if-else statements on CSS properties

I am trying to implement conditions on CSS properties in JavaScript. What is the most efficient approach to achieve this? <html> <head> <title>TOOLTIP USING JAVASCRIPT</title> <style> span{ curso ...

javascripthtmlcss

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

I am encountering an issue with a dropdown menu. When running the script, I receive the error message "ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated." Upon inspecting the HT ...

pythonhtmlseleniumrobotframework

PHP - The form page freezes up every time I try to submit the form

Hey there! I've encountered an issue with my form submission. Everything works perfectly fine, except when the Title field is left blank. Here's a snippet of my HTML code: Title: <input type="text" name="title"><br /> Description:&l ...

phphtmlforms

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

htmlcss