The issue with the background-size: contain property not functioning properly across different browsers is causing

Hey there! I have created a gallery using a DIV element with a changing background image depending on the preview image or text that is clicked on.

Since the pictures in the gallery are of different sizes, I decided to use "background-size: contain". The switching function works perfectly in Safari but not as well in Firefox and Chrome.

I'm wondering what I might be doing wrong (why is it only displaying correctly in Safari) and how I should adjust my code. Is there perhaps a better way to achieve this?

Check out my code on jsFiddle

<div id="bilder" style="position: absolute; bottom: 0px; left: 0px; width: 100%;
            height: -moz-calc(100% - 170px); height: -webkit-calc(100% - 170px); height: -o-calc(100% - 170px);

            background: url(https://www.google.de/logos/doodles/2013/holiday-series-2013-2-5173241802915840-hp.png) center bottom no-repeat; background-size: contain; z-index: 1;"></div>
            <a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-550112-thumb-fjcw.jpg) center bottom no-repeat'">google<a>
            <a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-549692-thumb-gsor.jpg) center bottom no-repeat'">bild<a>

Any assistance would be greatly appreciated!

cssbackgroundswitch-statementcontain

Answer №1

When you use 

document.getElementById('bilder').style.background=
, you are not only changing the css property background, but also the sub properties like background-size. If you don't redefine background-size, it will revert back to default (auto).

To avoid overriding other sub properties, I recommend using 

document.getElementById('bilder').style.backgroundImage
instead. Here is an example: http://jsfiddle.net/8m7VB/3/

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

Ensure that the elements are properly arranged inside divs that have been stretched

My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths. The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the ...

cssflexbox

Footer placement not aligning at the bottom using Bootstrap

I'm having trouble getting my footer to stay at the bottom of my website without it sticking when I scroll. I want it to only appear at the bottom as you scroll down the webpage. Currently, the footer is positioned beneath the content on the webpage. ...

javascripthtmlcsstwitter-bootstrap

Vertical alignment to the top is not possible for Inline-Block divs

When attempting to create a responsive 'grid' with two (div) panels that appear side by side on wide screens and stacked on top of each other on smaller screens, I came across an issue where the divs align at the bottom when displayed as 'bl ...

gridvertical-alignmentcss

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...

cssmaterial-designhtmlmaterial-design-lite

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

htmlcssdom

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

javascriptcss

Showcase three elements next to each other on the same row (Photo Gallery, Description, and Contact Form)

I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts. The divs include: Juicebox Photo Gallery; ...

csswebformsbootstrap-4drupal-8drupal-views

Display Text Only When Selected - Material-UI

Is there a way to display only the selected tab's text? I came across this code snippet in the MUI documentation that involves showing labels on selection. How can I achieve this effect, maybe by manipulating the state to change the color of the selec ...

cssreactjsmaterial-ui

How can you vertically center an icon button in Material UI?

Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...

cssreactjstypescriptmaterial-ui

Arrange radio buttons vertically in a table

I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with: <table> <tr> <td> First Name </td> ...

htmlcssradio-button

Text below div will be displayed

When hovering over a div, an identical one will appear next to it with more information. Unfortunately, the content appears under the div but retains the styling like border-radius and background color. This is how my HTML looks: The div that needs ...

jqueryhtmlcss

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

Safari experiencing a CSS issue not found in Chrome or Firefox

https://gist.github.com/2354116 When you check the link above in Chrome or Firefox, everything looks good. The divs at the bottom, including the headings and social icons, are centered within a container div without any issues. However, when viewed in Sa ...

csshtmltwitter-bootstrap

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui

Center an image both vertically and horizontally within an Owl Carousel arrow slider

I have set up an owl carousel on my page with a customized arrow positioned next to the slider. Currently, it looks like this: https://i.stack.imgur.com/gCfM0.png My goal is to vertically align the arrows and make sure the left arrow is aligned to the le ...

htmlcsstwitter-bootstrap

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?

It feels really repetitive to have to add margin classes to each LI manually on a non-dynamically generated menu. It almost seems as messy as using inline style attributes... Is there a more efficient way to handle this? While it may not be a big deal fo ...

csstailwind-css

Having trouble getting SCSS to function properly? (Updated Code)

Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS ...

htmlcsssass

Create a custom div class specifically designed for an image button

Apologies if my title is a bit misleading, I struggled to find the right phrasing. Currently, I have images linked to various social networks using href. For instance, clicking on the facebook icon directs to my Facebook page. The layout looks like this: ...

htmlcssimageclass

Displaying elements upon checkbox selection in React

Hello, I'm new to React and I am facing an issue with checkbox click handling in React. My goal is to display a div when a checkbox is checked and hide the div when the checkbox is unchecked. The current implementation only shows the div when the che ...

htmlcssreactjscheckbox