Struggling to apply size in percentage to several images used as a background

Displaying two background images with different positioning:

html {
    background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_Red_Fox_Kit.jpg),
                top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
    background-size: 50% 400px, 50% 400px;
}

The challenge arises when attempting to set the y position to 100%, as it doesn't work as expected. The issue lies in how the 100% measurement is being derived from something other than the entire page. Is there a CSS approach that allows me to position both background images at 100%?

You can view an example on this fiddle for clarification.

Live Demo

Your assistance is greatly appreciated!

css

Answer №1

It seems like you're suggesting that this code snippet may not be working as intended:

html{
    background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
    top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
    background-size: 50% 100%, 50% 100%;
}

When applied, it generates a visual output similar to this.

However, adjusting the height property of the html element to 100% resolves the issue:

html {
    background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
    background-size: 50% 100%, 50% 100%;
    height: 100%;
}

With this adjustment, the result should resemble this.

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

Adding a scroll bar to a fixed container: tips and tricks

I am looking to implement a scrollbar in a fixed container for the cart products. The goal is to enable easy navigation through a large number of products added to the cart by scrolling within the container. Below is the HTML code snippet representing the ...

phphtmlcss

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

What is the reason behind this button disrupting the arrangement of my design?

Whenever I attempt to add this customized CSS button to my company's website, it disrupts the center alignment of the entire webpage. Below is the HTML code: <div id="contain"> <button class="support"> </button> ​ Here is the c ...

cssbutton

the stacking context of elements with z-index and relative positioning

I am currently working on a modal that is toggled using JavaScript. Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the imag ...

csscss-position

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

javascriptcsshtmlcanvasprinting

Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

I have successfully integrated Bootstrap with a Wordpress Underscores Template. My goal is to create a horizontally scrollable container filled with images of equal height. Currently, I am facing an issue where the images within the scrollable container ...

csswordpressimagebootstrap-5image-scaling

Text scrolls - items are shown all at once

I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is rel ...

htmlcsstextscrollmove

Designing a dropdown menu with sub-menus that appear when hovered over

In my quest to design CSS that will dynamically display links in left-to-right divs, I am seeking a way for sub-menus to appear below the menu being rolled over. The challenge lies in the fact that these menus will be loaded from a WordPress database, mean ...

htmlcsswordpressdrop-down-menunavigation

Selecting an element from CSS using Jsoup

Is it possible to retrieve all images that do not have the first class attribute as "content.slide0"? In my example, I am utilizing the Jsoup library to display selectable elements in a WebView. Elements element = doc.select("HERE_SOLUTION"); <head ...

androidjqueryhtmlcssjsoup

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

Limiting the click event to the parent div only

I've encountered a problem with my overlay setup. I have an overlay with a child div inside, and I want the overlay to close only when the user clicks on the overlay itself, not the child div. Even though I've implemented the closing function, it ...

htmlcssreactjs

Adjust the content to expand and occupy the entire height using Material UI cut-off Drawer

I am using the provided Material UI code for a persistent clipped drawer, but I am encountering an issue with the content height. I have set the background of the content section to red in my demo sandbox to showcase the problem. My goal is for the content ...

cssreactjsmaterial-ui

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

htmlcss

Is there a way to make a TABLE expand to match the height of its surrounding element? (or, tackling sluggishness in IE with JavaScript)

I am facing a challenge with a web page where I have a table nested inside of a TD tag. Despite the unconventional approach, I need to ensure that the height of the nested table matches the height of the TD cell containing it upon page load. Currently, I a ...

htmlcssinternet-explorer

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...

cssinternet-explorer-9framesquirks-mode

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

htmlcss

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

cssangularjsangular-material

Tips for maintaining the original height of an image within an <img> element using HTML and CSS

I am facing an issue with a grid where I add grid-items, and then use the thumbnail class to provide dimensions to the thumbnail. When I insert an image into the <img> tag, it alters the height dimension, which is not desirable. I want the thumbnail ...

htmlcssgridheight

Revolutionary newspaper design utilizing asp.net's C# web forms

Trying to create a dynamic newspaper layout using ASP.NET C# web form. Struggling to set the page layout size inside a slider and display specific news content on a new page when clicking on an area of the newspaper using Repeater or another suitable contr ...

css