CODEWITHSUNDEEP
ruby-on-railsimagetwitter-bootstrapbackground
Erik Fromm
Erik Fromm

Reputation: 1

Background image with Bootstrap 3

I have a issue that it driving me nuts. I am beginning to learn RoR and I dont know why I can't set up a background image on my Bootstrap 3 app. I tried everything, but the the image doesn't "load".

I used this site to do this: http://css-tricks.com/perfect-full-page-background-image/

What could be doing wrong?

** If I change html to body, nothing happens. Same thing if I remove the quotes or not.

Thanks in advance!

UPDATE: **Sorry. Newb error. The image was damaged. There was the problem. Thanks for all help.

    <!DOCTYPE html>
    <html>
      <head>

     <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<style>

html { 
      background: url('images/fondo.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    </style>


</head>
      <body>



        <h1>Hello, world!</h1>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>

The funny thing is if I use any URL image like voices.suntimes.com/wp-content/uploads/2013/08/…, all works fine. The problem is with the images that are on my pc

Upvotes: 0

Views: 2705

Answers (2)

Philip7899
Philip7899

Reputation: 4677

Also, if you are using rails, you are setting up your application incorrectly.

In the apps/assets/stylesheets directory, you should put the stylesheet. Your images should be in the images folder in the assets directory. You should then refer to all images like

background: url('/assets/fondo.jpg') no-repeat center center fixed;

It can be tricky at first to get the hang of rails.

Upvotes: 0

Philip7899
Philip7899

Reputation: 4677

try

background: url('images/fondo.jpg') no-repeat center center fixed;

I think the quotes will make a difference.

Also, your second style tag is missing the closing slash. it should be:

</style>

If those don't work, also try replacing

html {

with

body {

Upvotes: 1

Related Questions