Intrigued by the connection between background and calc()?

Hello everyone!

I'm currently involved in a project and have a quick question regarding the calc function.

As we all know, it functions perfectly on all browsers...

========== great! =============

background-color:#dfdfdf;
background-image:url(..);
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;

However, I've encountered an issue with the following code not working on IE11. Can anyone help me figure out why?

========== having trouble on IE 11 =============

background:#dfdfdf url(..) no-repeat calc(100% - 10px) center;

-_-;;;;;;;;;;;;;;;;

cssinternet-explorer-11calcbackground-position

Answer №1

To ensure compatibility, IE11 must be used separately

body
     {
background:#dfdfdf url("https://www.w3schools.com/w3css/img_lights.jpg") no-repeat;
background-position:calc(100% - 100px) center;
}
<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="css/style.css">
     <title>Page Title</title>
     <meta name="description" content="Write some words to describe your html page">
   
</head>
<body>


</body>

</html>

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

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

The website has a fixed element that uses overflow:auto. Users can scroll this element by positioning the mouse over it. However, once the element reaches the end of its scroll, the page does not seamlessly take over the scrolling. Instead, there is about ...

javascripthtmlcss

Tips for merging identical media queries into a single query using SASS

Previously, I organized my media queries in LESS by combining them at a single place like this LESS: .media-mixin(@break) when (@break = 1200px) { .abc{ color: red; } } .media-mixin(@break) when (@break = 1200px) { .xyz{ color: yellow; ...

htmlcsssasslessscss-mixins

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

htmlcss

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

jqueryhtmlcss

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

htmlcssnavcentering

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

javascriptcssreactjsmaterial-ui

A pair of buttons and text with varying alignment

Here is the code from my popup.htlm file: HTML <body> <select style="width: 100%;" multiple id="HLSlist"> </select> <span style="display:inline"> <button type="button" id="Deletebut">Delete</button> ...

htmlcssalignment

Is there a way to adjust the transparency of a span element's background without affecting the text itself?

I have some code that needs to be customized. This is my HTML: <div class="text-rotator add-top-half add-bottom-half align-left white-txt medium-txt uppercase highlight-bg"> <div class="rotator-wrap" style="display: block;"> <sp ...

csshtml

Aligning Text at the Center in Your React Native Application

I'm facing a few issues with my visualization: Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center? Currently, the 'Sign Up Her ...

cssreactjsreact-native

Show the final element in a list in a new and innovative style

How can I style the last item of a list differently? The issue is with the display of the last item in the list, which may go out of bounds on smaller screens. To ensure proper display, the list item "Argenti" needs to be shown in a single column. To ach ...

htmlcsshtml-listscss-multicolumn-layout

Simple Design Techniques for HTML Tables

I seem to be having trouble with the table styles when I include text in the <td> section: <td rowspan="3"> 30th May 2014 17:35... What could be the issue? <style type="text/css"> .tftable {font-size:12px;color:#333333;width:100%;borde ...

htmlcsshtml-table

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justif ...

htmlcsscss-grid

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Hey there, is it possible to achieve this with CSS or JavaScript? I require it for a Birt report. ...

javascriptcssbirt

Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

I am currently in the process of developing a forum and bulletin board software. I am facing some challenges while trying to integrate a reply section into the thread page. You can view what I have implemented so far here. Html: <div class="panel pane ...

jqueryhtmlcsstwitter-bootstrap

Place each label and input element on a separate line without using div tags

Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...

htmlcssforms

What is the best way to connect an image to a different webpage?

I have a question regarding a div that contains an image acting as a link to another page. The image has text overlaying it and can be found at this link: This code was sourced from the internet, but I made some modifications to it. My goal is simply to ...

htmlcss

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...

htmlcss

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles