Return to Level1Techs.com

[SOLVED][HELP] 2 background images on webpage (unwanted)


#1

Hello sir/madam,
I have this error that I have 2 backgrounds on my webpage after adding a piece of code:

<script>
      // Set the date we're counting down to
      var countDownDate = new Date("Mar 1, 2019 15:00:00").getTime();
      // Update the count down every 1 second
      var x = setInterval(function() {
      // Get todays date and time
      var now = new Date().getTime();
      // Find the distance between now and the count down date
      var distance = countDownDate - now;
      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      // Display the result in the element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";
      // If the count down is finished, write some text
      if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
      }
      }, 1000);
      </script>

and the end result is:


As you can see the bg images is shown multiple times what is the error?

Goal: Wallpaper with the person on it should cover the screen 100%, no repeat no border.


#2
  1. Make sure it’s actually that snippet that’s causing it because that doesn’t do anything with the background
  2. Don’t copy & paste code you don’t understand
  3. background-repeat: none
Use code
    blocks

#3

Hey, thanks for responding.

  1. I know js, that but as I said that is the code bit that I added when before the webpage went from 1 image top-down, left right.
  2. Been working with js for 2 years
  3. It did nothing. Original code if you want to see it: nxtgc.ddns.net/thomas.html

#4

Well you’re still using var. So you have a leaking scope. Should use const or let.

Also, you’re wasting a lot. There’s no need to manually get the days, hours, minutes, etc. That’s all build into the Date object.

I suggest you look at the prototypes.

Also, when I go to your webpage it is rendering just fine with yellow borders on the side. And in the source I see it is using the no repeat option that @mihawk90 suggested.


#5

But that not what I wanted in the beginning, it should be the image as full screen, this gradient came from making the text: comingsoon gradient.


#6

Is you want a full-screen background you can use background-size: cover;. You also didn’t specify what exactly it is that you are trying to accomplish, so it’s a little hard to help you out there :wink:


#7

To have the wallpaper, the image with the personas the background image, 100% of the screen. I had that before something happened.

I had this if you noticed


#8

Actually didn’t since I’m on mobile right now :smile: I’ll check when I get home, can’t inspect on mobile.


#9

Snapshot

Edit: I fixed it


#10

Fixed:


#11

There is a stray p after the background-position, that might throw off the parser and invalidate the background-size.

Other then that you should always check what the inspector is saying, the source code might say very different things sometimes.


#12

But my countdown doesn’t work :confused:


#13

If the JavaScript isn’t executing properly there should be some messages in the developer console of the inspector.


#14

nothing in the console


#15

Can’t really see anything on first sight, would need ti check at home. Just make sure your JavaScript selectors are executed properly, i.e. they don’t return empty elements or whatever.

Other then that I can’t say much at the moment.

/edit:
This might be a rendering issue on mobile, but in your script file it appears as though the line where it is supposed to write the date string into the element is missing a line break before it, so it’s actually commented out.


#16

There are comments
image


#17

Yeah exactly, there’s a linebreak missing in that comment :wink: So the line that is supposed to fill the element is still a comment

id="demo"document.getElement…
         ^there

#18

yeye, I saw that, now I got an error in the console 44: uncaught syntaxerror: unexpected identifier


#19

You were supposed to make the line break after "demo", since that’s still part of the comment


#20

Okay, everything is fine now, thank you. I invite you to nxtgc.ddns.net/cred.html msg me if you accept the invitation.