Question 136661 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – CSS background-size rule being overridden but not sure why

I’m trying to set a background image with the CSS properties but with import/export using webpack. I had issues with the CSS rules not applying, and showing crossed out on the development console but I wasn’t sure why or how to fix it.

body {
    margin: 0;
    max-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

The HTML Code is

<html>
  <head>
    <meta charset="utf-8" />
   <title>Asset Management</title>
   <script src="bundle.js" defer></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

The exported JS is:

import Background from './background.png';
export const setBackGroundImage = () => {
  let body = document.querySelector('body');
  body.style.background = `url(${Background})`;
};

The imported JS is:

import './style.css';
import { setBackGroundImage } from './initial-page-load';

setBackGroundImage();

I know this setup is completely unnecessary but it was for TOP, course steps to get used to webpack.

When I load the index.html in the dist/, it shows https://i.imgur.com/38ljGad.png and the CSS file rules being crossed out and overwritten with https://i.imgur.com/aAz1GF7.png which makes the image repeat.

I’m not sure why this is happening and would appreciate any help. I’ve tried setting the image directly on CSS as a background-image, which works, but wanted to practice webpack and was stuck on what I’m missing here.

Thanks!

Tags:

2

Answers


  1. 0

    Does updating your setBackgroundImage() function from

    body.style.background = `url(${Background})`;

    to this

    body.style.backgroundImage = `url(${Background})`;

    instead do what you want? I tested with what you provided, and this seems to fix the issue for me.

    Login or Signup to reply.
  2. 0

    The CSS background property shorthand contains default values for the other background properties that overwrite your CSS selector due to less specificity than inline on the element (which your javascript is responsible for). If you instead only change background-image which is responsible for the background image, then you will avoid this conflict.

    Here’s a simple example to illustrate:

    div {
  height: 200px;
  width: 100%;
  background-image: url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg);
  background-repeat: no-repeat;
}
    <!-- div with inline background value overwriting CSS background-image -->
<div style="background:url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg)"></div>

<!-- div with CSS values only -->
<div></div>

<!-- div with inline background-image value and CSS background-repeat value -->
<div style="background-image:url(https://images-assets.nasa.gov/image/PIA08653/PIA08653~thumb.jpg)"></div>

    As you can see, the element with background set does not inherit the background-repeat` value. If you expand the background property (usually there’s a small arrow next to shorthand properties) in your inspector you should be able to see the value has been changed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search