The combination of calc() and linear-gradient in multiple backgrounds is not functioning properly in IE9

Looking to minimize the use of unnecessary divs, I have turned to multiple backgrounds. However, I am facing issues with it not working in IE9.

background: url(../images/home-2000.jpg) no-repeat -webkit-calc(50% - 200px) top, -webkit-linear-gradient(0deg, #dfe2e7 50%, white 50%);
background: url(../images/home-2000.jpg) no-repeat calc(50% - 200px) top, linear-gradient(90deg, #dfe2e7 50%, white 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfe2e7', endColorstr='#ffffff',GradientType=1 );
-webkit-background-size: auto 100%;
background-size: auto 100%;
css

Answer №1

If you're dealing with IE9 and CSS gradients, it's important to note that IE9 doesn't support them. You can check out more information on this topic here.

However, there is a helpful tool available that allows you to add gradient support for IE9. You can find the tool here. This tool creates an SVG image that can be embedded in the CSS code.

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

Color the entire rotated <th> element with a background shade

I have come across a unique issue that I cannot find a solution for on Stack Overflow or anywhere else. I am creating a comparison chart and need the <th> text to be rotated 270 degrees with zebra-striping on even columns. The problem is that while t ...

htmlcssbackground-colorcss-tables

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

When working with HTML and bootstrap (3.7) CSS, I often come across this issue: <div class="row"> <div class="col-xs-6">Stretch ME!</div> <div class="col-xs-6">Conditional</div> </div> Sometimes the "Conditional" d ...

csstwitter-bootstrapflexbox

Step-by-step Guide on Utilizing Bootstrap Table

Currently, I am in the process of fetching data from an API and displaying it in a tabular format using JavaScript. While I have successfully retrieved the data, I'm facing an issue with applying Bootstrap styling to the table headers. async functi ...

javascripthtmlcssbootstrap-5

Issue with disappearing text under navbar at href id in Bootstrap 5.When navigating to a

One issue I'm facing involves my navbar and how it interacts with links to content containers. Whenever I click on a link that scrolls the website to a container, the text ends up disappearing under the navbar. View the demo screenshots below for clar ...

htmlcssresponsivebootstrap-5

Is it possible to adjust the height of sibling divs within a sequence to match the tallest div?

Do you have a set of inline div containers with hardcoded widths but varying content heights? Is there a way to ensure that all divs maintain the same height without risking content overflowing from its parent container? I've experimented with inher ...

csshtmlheightsiblings

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

javascripthtmljquerycssbootstrap-4

Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar. https://i.sstatic.net/hbLtp.jpg There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch d ...

javascriptjqueryhtmlcss

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

I need to ensure that the red headers do not overlap with the blue headers' borders while scrolling horizontally. It is essential for me to have a white border on the blue headers. .container { overflow: auto; width: 200px; } table { borde ...

htmlcss

Can the Caption Adapt to the Image?

Code snippet: <script type="text/javascript> function displayNextImage() { x = (x === images.length - 1) ? 0 : x + 1; document.getElementById("img").src = images[x]; } function displayPreviousImage() { x = ...

javascriptjqueryhtmlcssimage

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

"Step-by-step guide to layering an HTML element on top of another with CSS

I am facing an issue with positioning a small icon over a slider using HTML and CSS. The problem arises because both the slider and the icon have a position absolute, causing the slider to hide the icon. Here is the CSS code for the icon: #nav { po ...

javascriptjquerycsshtml

Preventing Mobile Video Downloads: Tips and Tricks

I am facing a challenge with my website that contains several case studies featuring video headers set to autoplay. These videos are placed within a parent div element, which is hidden on mobile and tablet devices. Since the videos will not be visible on ...

csshtmlresponsive-designhtml5-videoautoplay

Struggling to integrate the navigation bar with Wordpress platform

For a while now, I have been facing challenges with the navigation bar on the WordPress theme I am currently creating. I am struggling to get the navigation bar to display correctly. Below is the code snippet from my header.php file: <body> &l ...

phphtmlcsstwitter-bootstrap

Uniform image dimensions across varying columns

I have a layout with 4 columns, each containing an image and text. The images in each column have different heights and widths, while the text lengths also vary. I want all the images to be the same height and width proportionate to the image itself. Addit ...

htmlcsstwitter-bootstrapbootstrap-4

CSS - Choosing between Background Size Contain or Default Size

Is there a solution to my dilemma regarding background images in a div? I need the image to be contained within the div if it's larger (background-size:contain;), but if the image is smaller, I want to keep it as is without stretching or blurring (bac ...

cssbackground-imagebackground-size

"An issue has been identified with the page-break-* feature not functioning properly on both Chrome and

Despite the abundance of questions on this topic, I have yet to find a viable solution. Here is my HTML code: <div class="row"> <div class="col-xs-12"> <div class="row print-break"> <div class="col-xs-8 col-xs-offset ...

htmlcssgoogle-chromeprintingsafari

What is the method for activating or deactivating pointer events for a particular section of an element?

Is it feasible to deactivate pointer events for only a portion of an element rather than the entire element? For instance, as shown in the image below.. https://i.sstatic.net/rnS7M.png Perhaps one could utilize another element to cover the specific area ...

htmlcss

Eliminate the link outline in p:tabView

How can the outline be removed when a user clicks on one of the tabs in <p:tabView>? Attempts to set it in CSS were unsuccessful. a { outline: 0 none !important; } Shown below is a screenshot of the issue. ...

cssjsfprimefaces

The CSS property input::-webkit-outer-spin-button adjusts the margin-left and is exclusively visible in Chrome browser

Strange things are happening... Let me share the code for my inputs: #sign_in input#submit { height: 56px; background-color: #88b805; font-weight: bold; text-decoration: none; padding: 5px 40px 5px 40px; /* top, right, bottom, left ...

webkitcss

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript