Local Weather, can't assign styles to the background images via classList.add() method [CLOSED]

Local Weather, can't assign styles to the background images via classList.add() method [CLOSED]
0

#1

Hi Guys,
I am trying to assign the styles of ‘bg’ class to the background images but it is not working.
Could someone help what’s wrong in my code?

Thanks,
Simon


#2

I just looked at your pen, but do not see the Switch statement shown in your screenshot.


#3

https://codepen.io/simongjetaj/pen/KXvrVM

Codepen’s Autosave… :tired_face:

Sorry @randelldawson, the code was erased…


#4


#5

You can skip adding the bg class, but you will need to modify your css as follows:

html,body {
  font-family: 'Skranji', cursive;
  font-size: 18px;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no repeat;
  background-position: center center;
}

Then your switch statement will need to look like:

    switch (weatherType) {
      case "Clear":
      default:
        document.body.style["background-image"] =
          "url(https://images.unsplash.com/photo-1469433791803-c2719135f970?dpr=1&auto=compress,format&fit=crop&w=750&h=&q=80&cs=tinysrgb&crop=)";
      }

Local Weather, don't know why the background images doesn't show up [CLOSED]
#6

Thanks for the answer @randelldawson. I have one more question, pls.

My last issue is that I would like the background image to fit width, height and should auto-scale in proportion.

This is the photo in large screen devices


and this the photo in other screen devices
I would like the second option to be on all screen devices. Do you have any idea, what can I do?
This is my css:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Skranji', cursive;
  font-size: 18px;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}
https://codepen.io/simongjetaj/pen/KXvrVM