I have rails 3.2.9 and I want to put a background image. my image is found in the folder: public/images and I put it also in the folder: assets/images.
ul {
height: 200px;
width: 350px;
border: solid 1px blue;
margin: 0 auto;
padding: 0px;
background-image: url('/images/todo.png');
}
but there is no backgound image.
please help.
I have to put:
background-position: center;
so my code is:
background: url(/assets/rsz_todo.png) no-repeat;
background-position: center;
and my image is found in assets/images
A simple way to check (before you edit your css) is to enter the path in the browser. This way your are sure what the path should be.
Your app/assets/images folder maps to:
http://domain/assets/
So if you have a app/assets/images/logo.png you should be able to retrieve that in your browser like:
http://domain/assets/logo.png
Then, in your CSS you should be able to refer to your logo.png like:
// app/stylesheets/application.css
body {
background: url(/assets/logo.png) no-repeat;
}
Also have a look at the Rails asset Pipeline:
http://guides.rubyonrails.org/asset_pipeline.html
In case this helps anyone finding this...Rails provides helper methods for referencing an asset in your CSS or SASS file:
background-image: image-url("rails.png")
Turns into...
background-image: url(/assets/rails.png);
Why don't you try just :
background: url(image.png)
The asset-pipeline is made up for simplicity.
If you put your image in assets/images then when calling that image you should use
background-image:url("/assets/image.png");
or you could try
background:url("/assets/image.png");
And sometimes i have found using background rather than background image works better, but that is just personal experience
Related
I am currently taking the Brad Hussey SASS course on his YouTube channel: https://youtu.be/q5BO71n8Fbk?list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR
I'm on video #10 currently.
Using Bourbon in its current version, 6. Bourbon deprecated +retinaimage after v4 and on their website it simply says to use vanilla CSS. Fine, I thought. So I filled in the CSS in place of +retinaimage. Here's the code:
.brand
+hide-text
background-image: url('..img/bourbon-logo_2x.png', 294px 56px)
background: center no-repeat
height: 56px
margin: $gutter auto
The code is from a SASS partial called _common.sass which compiles to app.css and the code compiled from the sass to app.css is:
.brand {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
background: center no-repeat;
height: 56px;
margin: 30px auto; }
Seemed logical.
Unfortunately the image is not showing on the page. I have copied the entire project path of the image, used different URLs pointing to hosted images.
Still I get the error.
I have searched, looked the YouTube comments and tried suggestions.
Still getting the error, so I'm asking what am I doing wrong?
I will upload the 2 images I grabbed. Hope someone cab help.
Simon
Invalid property from Chrome DEV
Larger Screenshot
Your second background statement is overriding the first.
background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
background: center no-repeat;
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
MDN
Switch the order:
background: center no-repeat;
background-image: url("..img/bourbon-logo_2x.png", 294px 56px);
I'm working on react and I want to use a local image in a public folder as a background with Transparent color as div container.
the problem is this image not showing at all
my method work with a different image from the internet (that start with https)
I also tried to put it in CSS but still the same thing
this is code of background from local image (not visible )
background-image: url("/public/images/background.jpg");
also, tried this
background: #eaeaea urlurl("/public/images/background.jpg");
this is the code of background from the internet (visible )
background: #eaeaea url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
**I think my problem with this methude url('/path/path/img.jpe) it shuld be **
// Import Bootstrap and its default variables
#import '~bootstrap/scss/bootstrap.scss';
.btn{
color: red;
}
.background {
background: #eaeaea url("/public/images/background.jpg");
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}```
Please try like this :
background: url('/./images/background.jpg');
Maybe it will work correctly.
What you need is to create an .env file in your project
Directory and Insert this code: SASS_PATH=node_modules:src then copy all the images
you want to use in src folder.
background-image: url("/background.jpg");
I believe you just need to add image to your background tag i.e:
background-image: url("/public/images/background.jpg");
I have an image called item8 that is being rendered on my webpage the css looks like this. This is in a css.sass file
.body-detail-intro {
background: url(/assets/item8-45411322696feaa47a0345b3e4bdd5de1b2cff8243c534b84a83a8d4d732ec0d.png) no-repeat;
background-size: cover;
background-position: center;
height: 55vh;
position: center;
color: white;
}
I am not sure where there hash on the image path came from as the image is just named item-8. When I remove the hash and just use item-8 the picture still loads.
Now enter this image Suitsandtables_HowitWorks.png
the code below doesn't work with Suitsandtables_HowitWorks.png I also tried it with another image I have already on my site called team-1 which still didn't work
.middle .right{
background: image-url("/assets/team-1.jpg") no-repeat;
background-size: cover;
background-position: center;
height: 600px;
width: 300px;
}
Ive tried background, background-image, url, image-url nothing is working. Might be a css issue which I am currently checking as in wrong classes called for the css to hook to but I don't think so.
I am using css.sass
That hash come from rake assets:precompile, which is run by default in production so your server or the CDN you're using are able to cache it.
Sprockets will handle that hash for you under the covers.
My file extension is only .scss, but that shouldn't matter.
.your-class {
// Note i'm using only the image name. No path
background-image: image-url('my_image.jpg');
}
I just extracted this example from a working project, so it should work just fine.
I'm writing a Rails application using Bootstrap. I want to set an image background for it, which I've done using an override.css.scss file. The background displays white when looking at my image, which is in the app/assets/images/ folder.
if I set the image to an external resource, it displays fine.
CSS in override with local image:
html, body {
padding-top: 60px;
background-image: url('app/assets/images/nyc.png');
/* background-repeat: no-repeat; */
background-color: transparent;
height: 1000px;
}
CSS in override with external image:
html, body {
padding-top: 60px;
background-image: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
/* background-repeat: no-repeat; */
background-color: transparent;
height: 1000px;
}
Baffling.
Relative URLs in CSS are relative to the to the CSS file, so perhaps you are pointing to the wrong location?
/path/to/app/assets/images/nyc.png
/path/to/style.css
Unless your CSS file lives here, relative to the file in question, you'll be getting a 404 on that image.
How can i add a image background to my website?
body {
margin: 0;
background: url(background.png);
background-size: 1440px 800px;
background-repeat:no-repeatdisplay: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
I did that much but nothing shows up on my page. I'm a CSS beginner.
Updated:
body {
margin: 0;
background-image: url(.../img/background.jpg);
background-size: 1440px 800px;
background-repeat:no-repeat;
display: compact;
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
Put the background url in quotes.
It should be background: url('background.png');
See here for working demo.
You also have an issue with the background-repeat line missing a semicolon in between two statements. If your background is really tiny you won't see it because of that issue.
Just to update on the solution, among the other issues, the background file was being refrenced with .../background.jpg when it should have been ../background.jpg (2 dots, not 3).
isn't the problem the following line is incorrect as the statement for background-repeat isn't closed before the next statement for display...
background-repeat:no-repeatdisplay: compact;
Shouldn't this be
background-repeat:no-repeat;
display: compact;
adding or removing quotes (in my experience) makes no difference if the URL is correct. Is the path to the image correct? If you give a relative path to a resource in a CSS it's relative to the CSS file, not the file including the CSS.
Is your image on the same folder/directory as your css file? If so, your image url is correct. Otherwise, it's not.
If by any chance your folder structure is like so...
webpage
-index.html
-css
- - style.css
- images
- - background.png
then to reference the image on your css file you should use the following path:
../images/background.png
So that would be background: url('../images/background.png');
The logic is simple: Go up one folder by typing "../" (as many times as you need). Go down one folder by specifying the folder you wish to go down to.
Adding background image on html, body or a wrapper element to achieve background image will cause problems with padding. Check this ticket https://github.com/twitter/bootstrap/issues/3169 on github. ShaunR's comment and also one of the creators response to this. The given solution in created ticket doesn't solve the problem, but it at least gets things going if you aren't using responsive features.
Assuming that you are using container without responsive features, and have a width of 960px, and want to achieve 10px padding, you set:
.container {
min-width: 940px;
padding: 10px;
}
If you add the following you can set the background colour or image
(your css)
html {
background-image: url('http://yoursite/i/tile.jpg');
background-repeat: repeat;
}
.body {
background-color: transparent;
}
This is because BS applies a css rule for background colour and also for the .container class.
And if you can't repeat the background image (for esthetic reasons),
then this handy JQuery plugin will stretch the background image to
fit the window.
Backstretch
http://srobbin.com/jquery-plugins/backstretch/
Works great...
~Cheers!
body {
background-image: url(your image link);
background-position: center center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
background-color: #464646;
}
For more modularity and in case you have many background images that you want to incorporate wherever you want you can for each image create a class :
.background-image1
{
background: url(image1.jpg);
}
.background-image2
{
background: url(image2.jpg);
}
and then insert the image wherever you want by adding a div
<div class='background-image1'>
<div class="page-header text-center", style='margin: 20px 0 0px;'>
<h1>blabaaboabaon</h1>
</div>
</div>
The problem can also be the ordering of your style sheet imports.
I had to move my custom style sheet import below the bootstrap import.