0
body {
    margin: 0;
    height: 100%;
    background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
    ), url("img/background.jpg");
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

(https://i.stack.imgur.com/3QrE2.jpg)]

The gradient linear repeats in page 2 while it doesn't in the page 1 despite the code being the same.

Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
support with ignite
  • 1

1 Answers1

0

Change the height to 100vh and set the width: 100%;

And if you are applying it on 2 pages then add the stylesheet correctly in head section of the page then it will work for sure.

body {
    margin: 0;
    /* height: 100%; */
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url("https://picsum.photos/1500/1500?random=1");
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
<body>    
</body>
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
  • Can you explain your recommendation about using background. I cannot see anything wrong with the background-image setting given in the question. – A Haworth Jul 29 '23 at 19:04
  • I can remember I explained it before to you in another question and the explanation is also here in this answer but still will provide you a reference [when to use background and when to use background-image](https://stackoverflow.com/questions/39607999/css-difference-between-background-and-background-image) I understand, in many cases like this it will still work but that doesn't mean it is correct. – Md. Rakibul Islam Jul 29 '23 at 19:15
  • This really doesn’t explain why background-image as given is incorrect. It is perfectly correct. – A Haworth Jul 29 '23 at 19:17
  • OK, I see in this case `background-image` property does take the `linear-gradient` parameter with the image URL successfully and works. But my point was in most cases, it only takes an image URL or multiple image URLs but not multiple different arguments. – Md. Rakibul Islam Jul 29 '23 at 19:58
  • You are confusing multiple instances of the same type of value, image in this case, separated by commas, with multiple instances of different types, e.g. size, image, position, which all come within one value. – A Haworth Jul 30 '23 at 04:45