CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
kevinfromspace
kevinfromspace

Reputation: 163

Background-image with linear-gradient on body not showing with Bootstrap

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>

Upvotes: 3

Views: 4065

Answers (2)

D.Schaller
D.Schaller

Reputation: 651

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);
}

Upvotes: 4

TayabRaza
TayabRaza

Reputation: 51

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;}

Upvotes: -1

Related Questions