CODEWITHSUNDEEP
css
user3905353
user3905353

Reputation: 77

Div background image not showing in heroku. However, the logo shows

I tried changing the image tag, no luck with that. I reviewed other post here and tried those solutions none work. I also use amazon cloudfront. 

<div id="signup" class="container-fluid">
</div>

#signup{
text-align: center;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)),
url("zoom1028.jpg");
}

Upvotes: 0

Views: 193

Answers (4)

user3905353
user3905353

Reputation: 77

I used sass Image specific helper: background-image: image-url("photo.jpg") and it worked. According to sass instructions here https://github.com/rails/sass-rails.

Upvotes: 0

Nitin Srivastava
Nitin Srivastava

Reputation: 1424

First set the fallback background-image then apply the gradient on the image. 

#signup{
  text-align: center;
  background-image: url("zoom1028.jpg"); # fallback
  background-image: url("zoom1028.jpg"), linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4));

}

Hope this would be helpful.

Upvotes: 0

Diego Michel
Diego Michel

Reputation: 21

On chrome right click inspect, the developers tools should show up, now click on the tab network, and see if there is any 404 error, maybe the image url isn't pointing were it should.

Check this example i built with your code:

https://jsfiddle.net/opqtncms/1/

<div id="signup" class="container-fluid">
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</div>


#signup {
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url("https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}

Best regards!.

Upvotes: 1

mangasaske
mangasaske

Reputation: 94

I think you should use the # selector because "signup" is an id.

#signup{
...
}

Upvotes: 0

Related Questions