2

So I've been searching for a bit why my background is not showing up, ill start with my bg css: 

body {
  background-image: linear-gradient
  (to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;
}

When I inspect element my html and body both have a width of 0px which is why it's not showing I guess.

I use Bootstrap 3 and removing it from my page does fix the issue but I use Bootstrap for a lot so that doesn't really work for me.

One cheap fix I use currently is creating a span inside the body tag with a single character and then making it's opacity 0 and hiding it in a corner but obviously this should only be temporary.

I've tried background-color which does work so I'm guessing there is some conflict between Bootstrap 3 and background-image or linear-gradient.

Does anyone know of a proper way to fix this issue?

EDIT: As pointed out in the comments, I realize if the body width is 0px it can't show my bg but what's causing my body width to be 0px?

EDIT2: Added HTML for reproduction:

<!DOCTYPE HTML>
<htmL>
<head>
  <title>Index</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/mycss.css" />
 </head>
 <body>
 </body>
 </htmL>
D.Schaller
  • 611
  • 3
  • 19
kevinfromspace
  • 153
  • 1
  • 15

2 Answers2

4

What is causing this behaviour is the rule margin:0 from normalize.less.

If you set the margin of the body to any value except 0, the background-image will render. 

body {
  margin: 1px;
  background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027);
}
D.Schaller
  • 611
  • 3
  • 19
  • That actually fixed it, I'm also seeing no change other then the bg working now so does setting the body margin to 1px actually do anything? – kevinfromspace Nov 06 '18 at 10:33
  • @kevinfromspace It does something, it sets the `margin`, which you don't see whithout any content in it. The body represents the complete window and fills it in this case. Try adding a `

    Test

    ` and play with the `margin` to see the differences.     – D.Schaller Nov 06 '18 at 11:04
  • @D.Schaller the body doesn't represent the complete window, here you are facing a background propagation – Temani Afif Nov 06 '18 at 15:29
  • @kevinfromspace check this one and you will understand what is happening : https://stackoverflow.com/questions/48502338/how-to-remove-the-stripes-that-appears-when-using-linear-gradient-property/48503609#48503609 .. the *to right* direction is hidding the trick, use *to top* and see the difference – Temani Afif Nov 06 '18 at 15:30
  • @TemaniAfif Whoopsie, then I should consider to talk about this with my teacher again. Thanks for pointing out! – D.Schaller Nov 06 '18 at 15:39
-1

You just need to remove a space after "linear-gradient". This css property should be written like this linear-gradient() and in the brackets you can put your code. The overall code should be like below.

body {background-image: linear-gradient(to right, #0F2027, #203A43, #2C5364, #2C5364, #203A43, #0F2027) !important;}
TayabRaza
  • 51
  • 4