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

Is it possible to modify CSS properties by clicking on buttons?

Hello, I really need help with this task. I want to change the style of a button (which is actually a link) by clicking on it. These buttons are housed within a dynamic child div that changes each time, but the name of the dynamic child div remains con ...

javascriptjqueryhtmlcss

What is the best way to animate CSS elements using jQuery to slide in from the right, left, or bottom?

When the page is scrolled on my website, I want table_area-left to move from left to right to its current position, table_area-right to move from right to left to its current position, and morph button to move from down to up. I am struggling to find the j ...

javascriptjqueryhtmlcss

Another class is overriding the border of the text-box

I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...

javascripthtmlcssreactjsmaterial-ui

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom T ...

javascriptcssreactjsgatsby

Use JavaScript to change the CSS pseudo-class from :hover to :active for touch devices

Looking to eliminate hover effects on touch devices? While it's recommended to use a hover class for hover effects, instead of the hover pseudo-class, for easier removal later on, it can be a challenge if your site is already coded. However, there&apo ...

javascriptjqueryhtmlcss

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Vertical alignment of divs in a single column will not be consistent

I need assistance with my website's "team" section. I am trying to ensure that the member_body divs within the same column as the member img and member header can be adjusted in width. However, they are not aligning vertically or maintaining the same ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Below is a screenshot that I have replicated in the code snippet. The code snippet contains a parent div with two rows mentioned: <div class="product-all-contents"> <div class="product-contents"> </div> <div class="product-contents" ...

htmlcssresponsive-designmedia-querieshorizontal-scrolling

Organizing knockout data outcomes into two separate columns

Is there a way to split up this code into two columns using Knockout and HTML? I can do it easily in CSS, but the goal is to divide the results into segments 1-5 and 6-9. Here is the code snippet. Also attached is a screenshot for reference. Thank youhtt ...

htmlcssknockout.js

Transform HTML content into a PDF document with page breaks

Currently, I am developing a function that involves an HTML template. The purpose of this function is to generate a dynamic template and convert it into a PDF. So far, I have been able to achieve this using the following code: var output = ''; ...

javascripthtmlcssnode.jspdf

Change shapes of figure blocks using Internet Explorer (I am using IE11)

Good day! I have implemented this code to create a flip effect on the blocks of my website: .tegels { /*position:relative;*/ width:25.2%; height:37.4%; overflow:hidden; float:left; margin-top:3.5vw; margin-bottom:0px; m ...

htmlcss

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

Structure of Divs with Bootstrap

Looking to create a layout with two divs side by side like the image below: Example However, when the screen width increases, the layout changes to this: Current Here is the code: Is there anyone skilled in this area who can guide me through it? Your a ...

htmlcssbootstrap-4

Is it possible to use an SVG image as a border with a variable height in CSS

Check out this jsfiddle for my current project's nav setup. I want to center the logo in the middle of the nav with three links centered around it. However, I need the design to be responsive across various screen widths. Any advice on how to achieve ...

htmlcsssvgheightnav

Displaying or concealing dropdown menus based on a selected option

My goal is to have a drop-down menu in which selecting an option triggers the display of another drop-down menu. For example, if I have options like "Vancouver," "Singapore," and "New York," selecting Vancouver will reveal a second set of options, while ch ...

javascriptphphtmlcss

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

javascriptjqueryhtmlcssanimation

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss

Serving static files in Django

Currently diving into Django and encountering a hurdle with static files. I've followed the setup in both the settings and HTML, but unfortunately, they are not loading on the website. Seeking assistance to resolve this issue! **settings.py:** STATIC ...

pythonhtmlcssdjangostatic