How come CSS percentages don't apply to height property?

I'm currently attempting to make an image fill 100% of the height and width of the html element (specifically, I want it to fill the browser window). My CSS is set up like this:

html{
  width:  100%;
  height: 100%;
}
img{
  width:   100%;
  height:  100%;
  z-index: 0%;
}

The width adjusts correctly, but the height remains unchanged. I even tried setting the height to 2%, but it made no difference. I don't want to use pixels for height because I need this to be mobile-responsive. Height, why are you not cooperating?

css

Answer №1

If you want to achieve a fullscreen background image, make sure to include height: 100% for the body element.

Following your example, consider the following CSS:

html, body, img {
    width: 100%;
    height: 100%;
}

It seems like you might be aiming for a fullscreen background image based on your use of z-index. Just a reminder that z-index doesn't accept percentages, only numerical values.

For achieving a fullscreen background image, you can refer to some methods mentioned in this resource:

http://css-tricks.com/perfect-full-page-background-image/

Answer №2

This issue arises due to the image element not being directly nested within the html element. To resolve this, you need to set the height for both the body element and any other parent elements that contain the image.

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

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss

What is the best way to eliminate all hover effects on smaller devices?

What is the solution to remove hover effects on elements in CSS? Consider the following HTML and CSS code: @media (max-width: 1220px) { .column { width: 200px; } .para { display: none; } .link:hover { color: red; } } @media (ma ...

htmlcss

Is there a specific HTML tag available to instruct the browser to cache my HTML and/or CSS files for future use?

Up to this point, my research has indicated that enabling JavaScript and CSS browser caching typically requires server side settings such as .htaccess. Is there any HTML tag or configuration within the HTML page or JavaScript that can instruct the browse ...

javascriptcsscachingbrowser-cache

passing a javascript variable to html

I am facing an issue with two files, filter.html and filter.js. The file filter.html contains a div with the id "test", while the file filter.js has a variable named "finishedHTML." My objective is to inject the content of "finishedHTML" into the test div ...

javascripthtmlcssvariables

Publishing Your App on the Android Market with PhoneGap

Seeking a comprehensive PhoneGap tutorial that covers app publishing, especially struggling with successful app deployment. Currently experienced in HTML, CSS, and JavaScript. Any tips or advice would be greatly appreciated, thank you! I have a good gras ...

javascripthtmlcssphonegap-buildphonegap-developer-app

React Native Transparent Modal Issue: Solution Needed

Recently, I encountered a problem with using a Modal to disable interactions on a screen while keeping everything visible. Oddly enough, it was working perfectly fine before, but when I attempted to turn the Modal into its own component, things took a turn ...

cssreactjsreact-native

Getting user input with JQuery and dynamically updating CSS properties

<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 ...

javascriptjqueryhtmlcss

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

What happens if I define both the left and right properties for spans?

This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...

htmlcsscss-position

Opting for CSS3 transitions over jQuery animate

Currently, I am working on animating a block of HTML that involves fading in (opacity) and slightly moving from the left (margin-left)... $('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () { ...

javascriptjquerycss

What is the best way to insert a text input with variable width into a table?

I am currently using twitter-bootstrap and have encountered an issue with two tables. The first table can be viewed here: http://jsfiddle.net/MELUd/ <table class="table table-bordered"> <thead> <tr> <td colspan ...

htmlcsstwitter-bootstrapresponsive-design

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

Troubleshooting CSS: Issue with :nth-child(3n):after clearfix functionality

Hey there! I've been experimenting with some CSS code that I thought should work, but unfortunately it's not displaying properly in Google Chrome. <ul> <li><a href="...">bla</a></li> <li><a href="...">bl ...

csscss-selectorsclearfix

Expanding the <li> elements to create a wide horizontal navigation menu that fits within a 960 grid layout with 12 columns

I'm having trouble making the individual "li" elements inside the "nav" element stretch to fill a 600px space defined by the class "grid_8" in the HTML. I've tried setting width:100%; for the nav, li { width: 100%;} and various other solutions wi ...

htmlcss

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

javascriptjquerycss

The symbols ♥ and ♦ in HTML are displaying as black on Android devices, despite being styled as red in the CSS

In the midst of my card game development using HTML, JS, and CSS on the Meteor platform. To represent the hearts suit, I utilize &hearts; and for diamonds, it's &diams;. The color scheme is crimson with color: #FF0000; in the CSS code. The fon ...

androidhtmlcssfontsmeteor

Position a div to float in the top right corner without overlapping its sibling header

Is there a way to position a div in the top right corner of a section without overlapping the text of a h1? This is the HTML code: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> < ...

csshtml

Styling unique text in an HTML text area

In the process of creating a web-based SQL editor, I am looking for a way to apply unique styling to certain SQL keywords (such as select, create, from) while a user is typing. Is there a way to achieve this using HTML alone? Alternatively, are there any ...

htmlcssformatting

Minimize the gap between the input text and the lower border

Is there a way to bring the input text field and text closer together by reducing the space between the bottom border and the text? #a { padding: 1px 3px; background: transparent; border: 0; outline: 0; border-bottom: 0.8px soli ...

htmlcss

Adjust the transparency of a navigation bar independently from the transparency of the text within the navigation bar

Seeking assistance on adjusting the opacity of this navbar without affecting the text within it. Any tips on changing the text color as well? <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#" ...

javascripthtmlcssbootstrap-4