Positioning multiple background images in Google Chrome

Is it possible to have multiple background images on the same element?

My attempt using Bootstrap:

<a class="left-icon icon-share list-group-item list-group-item-primary list-group-item-action">Exportable</a>

.list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position-x: var(--list-group-icon-padding-x), right var(--list-group-icon-padding-x);
   background-position-y: center;
}

This code works in Safari, but not in Chrome. Any suggestions on what I might be doing incorrectly?

Safari Example:

https://i.sstatic.net/8VvV0NTK.png

Google Chrome Example:

https://i.sstatic.net/V05O1Uet.png

cssbootstrap-4background-imagebackground-position

Answer №1

Each web browser interprets code differently. The problem lies in your code where background-position-x is not compatible with all browsers, notably Chrome. A more universally recognized alternative is to use background-position.

Consider the following solution:

.list-group-item-action.left-icon {
   background-image: var(--icon-auto-url), var(--list-group-action-icon);
   background-position: var(--list-group-icon-padding-x) center, right var(--list-group-icon-padding-x) center;
}

This approach incorporates both x and y coordinates into the background-position property, which should have broader support.

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

Firefox is not compatible with CSS animation

I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edg ...

csscross-browsercss-animations

Eliminate the display of Last Modified date and file Size in mod_autoindex

Recently, while developing a file storage webpage for my website, I successfully implemented mod_autoindex for my Apache server. However, I now face the challenge of removing the Last Modified and Size fields from the table. I am hopeful that there is a w ...

htmlcssapachemod-autoindex

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

htmlcsshtml-listsnav

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

javascripthtmlcssnode.jsexpress

Changing the direction of the cursor to move opposite of the mouse's input

I'm currently working on a unique webpage with an unconventional navigation method. The concept involves the cursor moving in the opposite direction of mouse movement input. To achieve this effect, I decided to hide the actual cursor and use JavaScri ...

javascripthtmlcssnavigationcursor

Removing the hash from the URL

My website built with Bootstrap consists of two main pages: index.html impressum.html I have successfully implemented page jumps within the index.html page and would like to access these page jumps from the impressum.html page as well. The functionalit ...

htmlurlbootstrap-4page-jump

Scrollbar Excess in Windows 10 on Chrome Version 76

<div style="overflow-x: hidden"> <div style="height: 100%"> <p style="margin-bottom: 1rem"> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida. </p> ...

htmlcssgoogle-chromeview

Achieving a shadow effect above a CSS border: tips and tricks

<div class="row"> some content <div class="info-box"> some other content </div> </div> .row { float: left; margin-bottom: 1.5%; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border ...

css

Creating uniform width children with Bootstrap's flexbox

Within my flex box container, the children are all displayed in a flex-row. I'm utilizing bootstrap to try and make sure that all the children have the same width and height. HTML <div class="d-flex flex-row flex-grow"> <div class="backgroun ...

htmlcssbootstrap-4flexbox

Ways to eliminate the gap between columns without using gutters

I implemented the code below to create two columns, but there seems to be some space between them. How can I remove this space, considering that I am using "no-gutter"? Check out the image here: https://ibb.co/80zTh60 <section id="incubator"> & ...

cssbootstrap-4gutter

Issue with Bootstrap 5.3 (Column alignment problem)

The issue at hand is the misalignment of the three columns. The code snippet providing more insight into this problem can be found below. Click here to view image description Or click here for another image description This alignment problem persists ev ...

htmlcssbootstrap-5col

Parsing CSS with PHP

Having an issue with my CSS link for images and need some assistance: background-image:url(images/background.gif); I'm looking to adjust the directory by adding ../. The code I aim to modify is as follows: background-image:url(../images/background. ...

phpcssparsing

Rotate background image upon each visit

I have a collection of around 50 background images that I want to display randomly each time a user visits my website. The idea is to provide a unique background image for every visit, without saving any information about which image was previously display ...

c#javascriptjqueryasp.netcss

What sets apart: input-group-prepend & append? (Bootstrap 4)

Can someone please clarify the distinctions between: input-group-prepend and input-group-append? I have been unable to locate any explanation in the documentation. ...

twitter-bootstrapbootstrap-4

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

htmlcsstwitter-bootstrap

What is the best way to organize the Fields into 4 identical columns within a grid layout?

I need assistance with organizing my UI elements into 4 equal columns, where both the label and input field appear on the same line within a grid or form layout. Can you please advise on the appropriate class to apply to the div tag that contains each pa ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

jQuery - "Error: fadeIn is not a valid function"

Encountering an odd issue here. Attempting to execute fadeIn() but receiving the error ".fadeIn is not a function". Here is my code: body { display:none; } <!DOCTYPE html> <html lang="en> <head> <!-- Required meta tags --&g ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

How can I use CSS to customize the appearance of the elements within an iframe?

<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...

htmlcssiframe

What is the process for obtaining X through the use of createElement('img')?

Is there a way to retrieve the X position from the left of the tag created using document.createElement('img'); var block00 = document.createElement("img"); block00.src = "images/sep1.png"; If so, how can it be done: if (block00.getBoundingCli ...

javascriptcsshtml

How can I make the background of a button change when I move my cursor over it

Is it possible to change the background image of a button when hovering over it? Perhaps have the image transition from left to right for a fading effect? Can this be accomplished? ...

javascripthtmlcssbutton