Problems with background-* - css

rubyonrails-talk
1

Hello guys, I had made a css file and link to my rails app, but, my background and others parameters in my css file.

an example:

* {font-family:Tahoma, "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}   body {background: url(image_path( 'bg.jpg' )) fixed no-repeat; width:100%; height:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}   .mTopZ {margin-top:0 !important;}

  .fLeft {float:left !important;}   .fRight {float:right !important;}   .wrap {width:990px; margin:0 auto; overflow:hidden;}   .wrapS {width:947px; margin:0 auto !important; overflow:hidden;}   .clear {clear:left;}   .wTotal {width:100%; float:left;}   .margin {margin-top:20px; margin-bottom:20px;}   .bradius {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}   .bradius_rz {-webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px;}

  header {width:100%; float:left; overflow:hidden;}

    header #user {display:inline-block; overflow:hidden; width:100%;}       header #user .gradient_green {margin-top:27px;}       header #user img {float:left; margin-top:19px;}       header #user h1 {font-size:13px; color:#FFF; margin:30px 0 0 15px; width:240px; float:left;}       header #user form {float:left; margin-top:25px;}         header #user form input[type="text"] {background:url(../images/inputSearch.png) no-repeat; width:141px; height:36px; border:0; padding:0 10px;}         header #user form input[type="submit"] {background:url(../images/btSearch.png) no-repeat; width:42px; height:36px; border:0; cursor:pointer;}           header #user form input[type="submit"]:hover {background-position:-0px -36px;}           header #user form input[type="submit"]:active {background-position:-0px -72px;}

    header nav {width:auto; margin:0 10px; float:left; overflow:hidden;}         header nav ul li {float:left; width:46px; height:83px;}           header nav ul li a {width:46px; height:83px; float:left;}           header nav ul li .icon1 {background:url('../images/nav-menu/menu_items.png') no-repeat; width:22px; height:23px; margin:29px auto 0 auto;}           header nav ul li .icon2 {background:url('../images/nav-menu/menu_items.png') -23px -0px no-repeat; width:23px; height:22px; margin:29px auto 0 auto;}           header nav ul li .icon3 {background:url(../images/nav-menu/menu_items.png) -47px -0px no-repeat; width:19px; height:23px; margin:29px auto 0 auto;}           header nav ul li .icon4 {background:url(../images/nav-menu/menu_items.png) -67px -0px no-repeat; width:20px; height:23px; margin:29px auto 0 auto;}           header nav ul li .icon5 {background:url(../images/nav-menu/menu_items.png) -0px -24px no-repeat; width:25px; height:23px; margin:29px auto 0 auto;}           header nav ul li .icon6 {background:url(../images/nav-menu/menu_items.png) -26px -24px no-repeat; width:16px; height:22px; margin:29px auto 0 auto;}           header nav ul li .icon7 {background:url(../images/nav-menu/menu_items.png) -43px -24px no-repeat; width:18px; height:23px; margin:29px auto 0 auto;}           header nav ul li .icon8 {background:url(../images/nav-menu/menu_items.png) -62px -24px no-repeat; width:22px; height:22px; margin:29px auto 0 auto;}

        header nav ul li:hover {background:url(../images/bgNav.png) no-repeat; width:46px; height:83px;}

none of thoses background's works, the called is correct, but the image is not called.

Thank's for the help.

2

If you add .erb to the file (<stylesheet>.css.erb) Rails will parse it before rendering.

-----Oprindelig meddelelse-----

3

I put main.css.erb, but continuing the same problem.

Thanks

4

So none of the styles are working? (with the file.css)

actually you don’t have to put .css.erb, if you want you can put css.scss

Javier Q.

5

Javier Quarite wrote in post #1048311:

6

As I said … it is not necessary … if you know how to work with SCSS then it will help you, if not you just only have to work with .css extension as usual, but … lets say you have a Product view then you need product.css

and inside this you have to write the css for that view.

You may have notice that there’s an application.css, you can put your styles in there. At least you should try your style in a static html file and see if it’s working

Javier Q.

7

Ok, but, in my application.html.erb I put <%= stylesheet_link_tag "reset", "main", :media => "all" %>

On HTML generated, the css is called correctly, but the background don't work

8

Hi, sorry I should have read your post properly. I've had similar problems, the path to the images is not what you think it should be! The point about adding .erb or .css is that you can use embedded Ruby, and call Rails helpers such as imagetag(). Or you could experiment with the path to find out what it should be or alternatively use fully qualified URIs.

-----Oprindelig meddelelse-----

9

yes right - how about with .erb extension and use asset_path() for example:

background: ulr(<%= asset_path(‘bg.png’) %>);

10

Hello Paul, I made what you say:

main.css.erb

body {background: url( <%= asset_path "images/bg.jpg" %> ) fixed no-repeat; width:100%; height:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

but still not showing my background.

Thanks

11

A few hours ago I had this

#overlay {

background: url(“spinner.gif”)

}

in my application.css and it worked

the spinner.gif is inside app/assets/images/

Javier Q.

12

thats right, just put the asset_path( "myImage.jpg" ) to a full URI

Thanks for all!