Tips for making an image fill the screen while keeping space for content underneath

Upon loading the page, I would like my image to fit the size of the screen. While I've achieved this, all other text now appears underneath the image rather than below it (I hope that clarifies things).

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg);
  background-size: cover;
  background-position: 50% 50%;
}
<div class="main">

</div>

<h1>Hello World</h1>

<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

htmlcssresponsive

Answer №1

If you're looking for browser support, it really depends on what you need. Here's a helpful link to check out the support for viewport units: here. You can utilize 100vw and 100vh instead of using 100% to adjust the height/width of the div. Just make sure to remove the unnecessary position: absolute; property as shown in this example:

.main {
  width: 100vw;
  height: 100vh;
  background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg);
  background-size: cover;
  background-position: 50% 50%;
}
<div class="main">

</div>

<h1>Hello World</h1>

<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

Answer №2

Apply the CSS code below to style the main element:

.main {
    width: 100vw;
    height: 100vh;
    background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

Note that there should be no position: absolute property!

.main {
width: 100vw;
height: 100vh;
background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg);
background-size: cover;
background-position: 50% 50%;
}
<div class="main">

</div>

<h1>Hello World</h1>

<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

Answer №3

By setting the html and body to 100% height, you can achieve a similar result without relying on vh/vw units.

html,body{height: 100%;}
.main {
  width: 100%;
  height: 100%;
  background-image: url(https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg);
  background-size: cover;
  background-position: 50% 50%;
}
<div class="main"></div>
<h1>Hello World</h1>
<p>wtfffsk;dflaskjf;laksdjf;laskjf asdfals;kjfal as;flkajs f</p>

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

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

javascriptphphtmlcsstwitter-bootstrap

Stop the webpage from scrolling when clicking on a ui-grid field

Is there a way to prevent page scrolling when clicking on a row field in ui-grid? I'm working with a page that has ui-grid, and each row includes an anchor tag with a URL value linked and target="_blank" to open in a new tab like the example below: ...

javascriptangularjshtml

Ways to eliminate models that are not currently connected to the DOM

Within my form, I have implemented logic using ng-if to determine which elements are displayed based on user selections. For instance, if a user selects USA as the country, the state drop down will be shown as it was conditioned upon an ng-if for the count ...

javascripthtmldomangularjs

Google Chrome users may experience unexpected position changes in jQueryUI modal dialog when dragging

Chrome version 26.0.1410.64 jQuery version 1.7.1 jQueryUI version latest The web app is created using asp.net webforms When the page is at the top, the dialog opens normally and functions correctly. However, if the page is scrolled down and the di ...

cssjquery-uigoogle-chromewebformsjquery-dialog

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

Automating the extraction of dynamic tables using Python and Selenium from nested classes

I've been attempting to extract data from two tables that are updated every 0.5 seconds, with the tables nested within a class structure. I initially used Selenium's driver.find_element_by_xpath and attempted to retrieve the data using a series o ...

pythonhtmlseleniumcss-selectors

Automatically submit HTML form data as a JSON object to an API endpoint

I am working on incorporating an online form from Formstack onto a website, and the form's code is in HTML. However, I am seeking assistance in configuring it so that whenever a user submits information through the form, it will automatically send me ...

htmljsonautomation

Tips for maintaining sequential numbering in Mediawiki sections

Looking to enhance the formatting of numbered lists by adding section headers and restarting numbering? The old Mediawiki format supported this, but it no longer works in version 1.24. For example: ==First Header2== # # ==Second Header2== # Desired output ...

cssheadermediawikiindentationnumbered-list

What is the process behind the creation of the class or id fields in HTML for Gmail and Quora? How are these

When using Gmail: <tr class="zA yO" id=":1t4"> While on Quora: <span id="ld_zpQ1Cb_27965"> What is the purpose behind this and what specific tool do they employ to achieve it? ...

htmlcssgmail

Application for examining the div layout of a website

Are there any tools available that can display the complete div layout structure of an entire webpage? While using Chrome's inspect tool, I noticed that it only shows individual divs as you scroll through the page. I am looking for a tool that can an ...

csshtmlgoogle-chromeinspect

How can I effectively access and view HTML files within VSCode while utilizing WSL?

Has anyone else experienced issues with the open-in-browser extension? Whenever I try to open my HTML file for a project, it doesn't load in the browser. I've attempted storing my repository in different directories on Linux and even in a folder ...

htmlvisual-studio-codewindows-subsystem-for-linux

Searching for specific expressions within HTML files on Windows can be accomplished using the grep or findstr commands, allowing you to display the

I am trying to use grep or findstr to extract the correct IMDB number when searching for a specific movie by its title. For example, the movie "Das Boot" is listed on IMDB with the movie number tt0082096. Currently, I am attempting to search through HTML ...

htmlgrepfindstr

Footer content encroaching on main body text

Thank you so much for your assistance. If you want to check out the content, visit it online The issue I'm facing is with my footer. It doesn't stay below the content as I'd like it to. I tried using Matthew James Taylor's technique, ...

cssxhtmlfootersticky-footer

Error message in the browser console: Uncaught TypeError - The function allSections.addEventListener is not recognized

Whenever I inspect my browser console, I keep encountering this error: Uncaught TypeError: allSections.addEventListener is not a function at PageTransitions (app.js:16:17) at app.js:33:1 I find it strange because my VS Code editor does not display any err ...

javascripthtmlconsole

A step-by-step guide to successfully integrate vantajs wave in your React application

My problem involves using the vantajs wave library. I want to figure out how to make the waves continue rendering on a specific CSS selector even after clicking through the tablinks of my react app. However, I encounter an error when using Brave browser th ...

htmlreactjsthree.js

Incorporate alternate text to enhance hover effects on the page

Looking to add a hover effect to images without being able to use the title attribute in the img tag? Consider using the alt text attribute for the title on hover. <img width="300" height="169" src="300x169.jpg" class="attachment-medium" alt="sometexth ...

jqueryhtmlcssalt

Problems with implementing media queries in CSS

Our team is currently delving into the realm of responsive design and experimenting with a mobile-first framework. In an attempt to utilize media queries to adjust our layout based on screen size, we have crafted the following CSS: .flex, .cards, .card { ...

csstwitter-bootstrapresponsive-designmedia-queries

Discover the secrets to achieving complete customization of your data table's appearance using the DevExtreme React Grid in conjunction with material-ui

I am facing difficulties in styling the DevExtreme React Grid, which I found from their documentation here. Here is the sample code that I copied from another repository. I have a few questions: How can I have complete control over the styling? I noti ...

cssreactjsmaterial-uidevextreme

Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, ...

javascriptjqueryhtmlcsshighcharts

Alter the status of a checkbox programmatically

There are two checkboxes available: <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> The desired functionality is that when clicking on id3, id4 should also be checked. Initially, this works as e ...

javascriptjqueryhtml