Problems with background-* - css

Rails
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

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

Thanks

3

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

-----Oprindelig meddelelse-----
Fra: [email protected]
[mailto:[email protected]] P vegne af Felipe Pieretti
Umpierre
Sendt: 22. februar 2012 22:20
Til: [email protected]
Emne: [Rails] Problems with background-* - css

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.

–
Posted via http://www.ruby-forum.com/.

–
You received this message because you are subscribed to the Google
Groups “Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

4

Javier Q. wrote in post #1048311:

On Wed, Feb 22, 2012 at 4:31 PM, Felipe Pieretti U. <
[email protected]> wrote:

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.

I change now to main.css.scss, and I reload my page and this errors
show:

Alpha channel 70 must be between 0 and 1 inclusive for `rgba’
(in /home/felipe/rails/Younner/app/assets/stylesheets/main.css.scss)

Thanks

5

On Wed, Feb 22, 2012 at 4:42 PM, Felipe Pieretti U. <
[email protected]> wrote:

I change now to main.css.scss, and I reload my page and this errors
show:

Alpha channel 70 must be between 0 and 1 inclusive for `rgba’
(in /home/felipe/rails/Younner/app/assets/stylesheets/main.css.scss)

Thanks

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.

6

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

7

On Wed, Feb 22, 2012 at 4:31 PM, Felipe Pieretti U. <
[email protected]> wrote:

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

Thanks

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.

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-----
Fra: [email protected]
[mailto:[email protected]] P vegne af Felipe Pieretti
Umpierre
Sendt: 22. februar 2012 22:20
Til: [email protected]
Emne: [Rails] Problems with background-* - css

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.

–
Posted via http://www.ruby-forum.com/.

–
You received this message because you are subscribed to the Google
Groups “Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

9

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

10

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

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

On Thu, Feb 23, 2012 at 2:45 PM, Brynjolfur T.
[email protected]wrote:

Til: [email protected]
width:100%; height:100%; -webkit-background-size: cover;
.margin {margin-top:20px; margin-bottom:20px;}
header #user h1 {font-size:13px; color:#FFF; margin:30px 0 0 15px;
header #user form input[type=“submit”]:active
width:23px; height:22px; margin:29px auto 0 auto;}
{background:url(…/images/nav-menu/menu_items.png) -26px -24px no-repeat;

“Ruby on Rails: Talk” group.
“Ruby on Rails: Talk” group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.

–
Either I will find a way or I shall make a way

11

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

Thanks for all!

12

On Thu, Feb 23, 2012 at 5:44 PM, Felipe Pieretti U. <
[email protected]> wrote:

Thanks

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.