Creating a background that adjusts based on the aspect ratio of an element using only CSS

In a div element, the size, which encompasses both width and height, is determined by its content. Since the content is loaded dynamically, there are instances where the width of the div is greater than its height, and vice versa.

Is it feasible to assign different backgrounds in CSS based on whether the width > height or width < height, without using JavaScript?

I am thinking along the lines of an orientation media query, but specific to a particular element rather than the entire screen.

htmlcss

Answer №1

To my understanding, it seems like you are looking for something similar to the following:

.box {
  min-height:50px;
  margin:10px;
  border:1px solid;
  background:
    linear-gradient(green,green)   left/calc(100% - 800px) 100%,
    linear-gradient(yellow,yellow) left/calc(100% - 600px) 100%,
    red;
}
<div class="box"></div>

In this specific case, if the DIV's width is more than 800px, the color will be green, between 600 and 800px it will be yellow, and less than 600px it will be red.

I hope this explanation was helpful to you.

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

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

Do the divs keep shifting as I adjust the window size, even with a wrapper div in place?

As a newcomer to HTML, I am struggling with creating a basic calendar. Currently, I have only managed to create a grid. The issue I'm facing is that my wrapper div does not seem to be working properly - when I resize the window, the divs within it sti ...

htmlcssresizewindowwrapper

Using JavaScript/JQuery, change relative or viewport sizes to fixed sizes when the page loads

Wishing you a delightful day. As I work on my website, I find myself relying heavily on viewport units like vw and vh for all measurements such as font size, padding, margin, width, and height. These units provide the flexibility needed to ensure that the ...

javascriptjqueryhtmlcssviewport-units

"Enhance User Experience: Use CSS to highlight text selection based on

As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text t ...

jqueryhtmlcss

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

Is it possible to remove the address bar from appearing on a browser when a page loads?

I am in the process of developing a customer wifi landing page, and although we have made progress with ensuring it is the first page that loads, I want to take it a step further. My goal is to require customers to agree to our usage policy before gaining ...

javascripthtml

Cycle through a selection and generate an HTML element for each individual item within the collection?

My Model(Objectives) stores the necessary data for iteration. Below is its code in models.py: class Objectives(models.Model): target = models.CharField(max_length=50) description = models.TextField(max_length=300) time_left= models.DateField() ...

htmldjangodjango-modelsdjango-views

Creating a function to target a specific HTML class in Angular can be achieved by utilizing Angular

Can a function be created for the entire class instead of adding it to each individual line? In this case, I have a class called "dropdown-item" for each link with this class, and I want them all to have the same function. <li class="nav-item dr ...

htmlangular

Utilizing jQuery and Bootstrap imports within a JavaScript file

Having difficulty importing libraries into my JS file. While the code functions when placed in a script tag in my HTML file (where I included jQuery and Bootstrap), it fails to work when placed in my JS file. My attempt to import the Bootstrap library thr ...

javascripthtmljqueryimportbootstrap-5

The HTML5 Cache Manifest is attempting to cache a resource that has not been defined in the manifest

Currently, I am developing an application that requires caching certain requests. I have been experimenting with HTML5 cache and here is my manifest file: CACHE MANIFEST # 2d25a26de3a1148a2fa5e534325f84cca2184090174c6ba451451c54f71f52d6 assets/applicatio ...

ruby-on-railshtmllocal-storagehtml5-appcache

Tips for integrating PHP with HTML5 while developing a Blackberry native application that utilizes Blackberry websockets

I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...

htmlblackberry

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

htmlinternet-explorercss

Challenges arise when dealing with the dimensions of a webpage while loading it with Jquery

Having an interesting problem here - I'm utilizing Jquery to load an HTML content into a Div element, however, strangely enough, the width and height are not adjusting as expected. Here's the snippet causing the trouble: $("#middlebox").html(&ap ...

javascriptjqueryhtmlcss

Sharing information linked to dynamically generated HTML elements in MVC5

Currently, I am working on developing an MVC5 application. Within a view, I am dynamically creating HTML elements such as textboxes and dropdown lists using a JSON result returned from the server and jQuery. Now, my goal is to submit the selected data IDs ...

jqueryhtmlasp.net-mvc-5

Tips for effectively duplicating HTML/CSS code snippet

I attempted to replicate this html/css snippet from the following link: I copied all of the html code and also included all the css, including any linked style sheets, into a single document. Upon running the copied code in the browser, it displayed corr ...

htmlcsstwitter-bootstrap

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

javascriptcssreactjsmaterial-ui

Can vertical spacing be managed exclusively with CSS?

I am facing a challenge with the layout of my header bar containing a logo and search form, both floated to the left. I have been struggling to control the vertical spacing of the search form using CSS as a solution that works consistently across browsers ...

css

Ways to identify changes in an HTML page following a form redirection

views.py class UpdatePasswordView(PasswordChangeView): form_class = UpdatePasswordForm success_url = reverse_lazy("login") login.html {% if passwordChanged %} <p style="color:green;">Your password has been successfu ...

htmldjangodjango-viewsdjango-formsdjango-templates

Is it possible to determine the current scroll position using <a name=#page> in JavaScript?

I am currently in the process of creating a website to showcase a comic, with each page being accessed by scrolling using < a name=#page(number) > in HTML. For example, the button to navigate to the next page would look like this: <a href="#page ...

javascripthtmlscroll

Designing Interactive Circular Dates on Website

Currently, I am working on a webpage using HTML, CSS, JavaScript, and PHP. The goal is to design a page that features 7 circles representing the current date and the next 6 days. Users should be able to click an arrow to navigate to the following 7 days. ...

javascriptphpjqueryhtmlcss