0

I'm using the source code from this site to build my website using rails.

http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/

According to the tutorial I'm following I'm supposed to include this code

<link href="https://blackrockdigital.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">

in views/layouts/application.html.erb to get the image, which works.

My question is how do I use my own image as opposed to pulling it off the web?

-----edited-----

@sajan I did what you said and changed the css header like so

.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../assets/images/img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

but the image won't show. Any idea what else I could be doing wrong?

camelCaseCoder
  • 1,447
  • 19
  • 32
iswg
  • 195
  • 1
  • 10
  • You'd have to overwrite the CSS. You can check out http://stackoverflow.com/questions/9024252/adding-a-background-image-in-ruby-on-rails-2-in-css for some answers, regardless of age. – SirUncleCid Oct 17 '16 at 05:51

1 Answers1

1

It's just a css file used to style some specific css classes, depending on what you are following from that site, you may need their stylesheet to get particular styles so if you dont want to pull it off net everytime, you can save it in your local and include it you rails application.

Just save that css by visiting that link and put it in your app/assets/stylesheets and you are done. But you wont get any update if they update that css in future, you will have to download manually and update your local copy.

As per the discussion, if you have sass then you can use background: image-url('practice.png');to get the background image working.

for reefrence here is the rails guide document

Sajan
  • 1,893
  • 2
  • 19
  • 39
  • I did what you said but the image won't show. .header { display: table; position: relative; width: 100%; height: 100%; background: url(/assets/images/bg.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } – iswg Oct 17 '16 at 06:13
  • verify that you have added that file correctly by checking source of page. press `ctlr+u` and see if it lists `stylish-portfolio.css` file and click on it if it has that file to see the `css` codes. – Sajan Oct 17 '16 at 06:17
  • inspect and get the image url and try visiting that image url in browser directly and see if it shows the image. This is to verify that image exists and maybe you are adding the image url wrongly – Sajan Oct 17 '16 at 06:31
  • it won't show the image! Maybe I have the path wrong? Right now the path is (http://localhost:3000/assets/images/practice.png) – iswg Oct 17 '16 at 06:32
  • where did that `practice.png` come from ? you are using `bg.jpg` in your code so its a complete different name or you forgot to post that here ? – Sajan Oct 17 '16 at 06:38
  • my mistake. i decided to use a different photo. – iswg Oct 17 '16 at 06:41
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125873/discussion-between-sajan-and-iswg). – Sajan Oct 17 '16 at 06:42