Background-repeat attribute not working?

Design help General
1

Hey! I have a BG image that measures 920x1390px. Since it is mainly vertically, I am trying to add a tiling effect with an IMG attribute (background-repeat: “repeat”). Unfortunately, although the attribute appears on the HTML, it does nothing. Am I missing something?

I, unfortunately, can’t add the link since the project is still under NDA.

2

hi @Kron98 As you do not share “read-only” it will be hard to help as nobody is a wizard to see what you have done and where problem is. Anyway, what I can see from your request you are missing a basic knowledge how to work with this platform . Feel free to visit Webflow university to learn how to use it.

3

Does this helps?

The problem I have is with the BG image.

4

Hi @Kron98 why you just don’t apply background image on viewport Div?

5

Yeah, that fixes the issue, but I have a piece of JS code that changes the src of the IMG at different times of the day. That’s why I had to add it as an image instead of the BG, unless there is a way of changing the src of the background image with JS, instead of the BG itself.

6

hi @Kron98 I do not see any problem. As you have mentioned that you are using custom JS just write JS code that will change background image URL at certain given interval(time).

7

Yeah, sorry for my poor explanation. So, the code that changes the src is this:

<script>
var date = new Date();
var hour = date.getHours();
/*
Checks if the hour is 7am or more
AND 
if the hour is less than 18 (6pm)
*/
if(hour >=7 && hour < 18) {
    //the hour is between 7am to 5:59pm
    document.getElementById("BG").src = "image1";    
}else{
  //the hour is between 18pm to 3am (2:59am)
    document.getElementById("BG").src = "image2";
}
</script>

It works perfectly if I have an image as the BG, but doesn’t work if I have it as a background image inside the Viewport Div. I am pretty new to JS in general, unfortunately, so can’t figure this out :S

8

HI @Kron98 you can find “how to” on internet here are some examples but feel free to use your favourite browser to find more nice articles or videos. Keywords can be change background image javascript

https://www.techiedelight.com/change-background-image-div-with-javascript-jquery-css/

9 
var date = new Date();
var hour = date.getHours();
/*
Checks if the hour is 7am or more
AND 
if the hour is less than 18 (6pm)
*/
const el = document.querySelector(".viewport-div");
if (hour >= 7 && hour < 18) {
  //the hour is between 7am to 5:59pm
  el.style.backgroundImage = "url(path/to/image1)";
} else {
  //the hour is between 18pm to 3am (2:59am)
  el.style.backgroundImage = "url(path/to/image2)";
}
1 Like
10

Got it! Working perfectly!! Thank you so so much :slight_smile:

1 Like
11

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.