because I am new to slidify, maybe doing a mistake
edited : slidify.css
.title-slide {
background-color: #b4f2f2;
background-image:url("C:/download/ibm-db2.png");
}
the color is changed as requested - but the image is not displayed
although the file is in correct location
Directory of C:\download
07/18/2014 08:13 PM 10,315 ibm-db2.png
thanks for all update
best regards, Guy Przytula
Local image works with a relative path from assets folder. For example:
bg:url(assets/img/picture.png)
assets folder is inside your slidify project
Your slidify project:
|
|--index.Rmd
|--index.html
|--assets
| |--img
| |-- picture.png
|
|--libraries
It does not matter where the picture is, but to keep an order you should follow Jorge's advice.
You need to go to this route: and find "slidify.css"
\test1\libraries\frameworks\io2012\css
Look and change this part:
.title-slide {
background-color: #FFFFFF; /* #EDE0CF; ; #CA9F9D*/
background-image:url(D:\\test1\\star-bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
/* background-image:url(http://goo.gl/EpXln); */
}
As you see the path to my logo file has "\". This is the path I get when using: file.choose().
If you use RStudio probably you won't see the image loaded. You need to go to the folder where the index.html is and open it on any browser.
Related
My file is setup like this:
main folder
index.html
css
image(folder)
and I've tried
background-image: url("../images/vegies.jpg") no-repeat;
("images/vegies.jpg") no-repeat;
('../images/vegies.jpg') no-repeat;
please, can anyone help me ?
If your files are like:
Food/
index.html
style.css
images/veggies.jpg
If you are inside style.css and you want to reach the pic, the path is ./images/veggies.jpg
If you type ../ your path goes one folder outside, if you start with ./ you start from the same folder you are.
I'm trying to use a photo (
that I copied the path from) to make my background image. I added an image earlier using the same method to copy the location and it's showing up.background-image:
it's turning blue in the parenthesis.
I'm brand new and have no idea what to do. Any help would be greatly appreciated!
#body{
background-image: url(/Users/samanthagaiser/Basic_portfolio/assets/images/dot-grid.png);
}
when I "follow the link" in cs code it clicks over to the next window where I have the image saved.
Copy and paste image, .CSS file and .html file in one folder. Or if You have just .html file copy image to same folder as .html then change:
body{
background-image: url('./dot-grid.png');
}
Path to image have to be relative to file where You load it.
Bellow examples:
No 1.
CSS: /resources/css/styles.css
Image: /resources/images/image.jpg
CSS in styles.css:
div { background-image: url('../images/image.jpg');
No 2.
CSS: /resources/css/styles.css
Image: /resources/css/image.jpg
CSS in styles.css:
div { background-image: url('./image.jpg');
./ = look for image in same folder where .css file is.
../ = look for image below folder where .css file is.
../../ = loog for image two folders below .css file is.
I am trying to change the background for my play.erb page but I'm struggling to get the image (that is held locally) to show. The page works when using a placeholder image provided online. The error message I am getting is this.
127.0.0.1 - - [06/Mar/2018:21:55:49 +0000] "GET /images/map.jpg HTTP/1.1" 404 515 0.0137
As I understand the 404 reflects the fact that the image can't be found.
I have looked at other SO responses and have tried moving the jpg into the same directory, adding and removing quotation marks and adding the 'public' and 'image' directories, all to no avail.
Can anyone see where I am going wrong? I have added the code and my directory structure below.
Thanks for your time.
#play.erb
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/public/images/map.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
File structure
Root Directory
lib (dir)
lib(dir)
my_app.rb, views(dir)
views (dir)
index.erb, play.erb, public(dir)
public(dir)
images(dir)
images(dir)
map.jpg
As per http://sinatrarb.com/intro.html there were two key issues with my file structure and code.
1.) Static files are served from the ./public directory.
I adjusted my file structure to this:
Root Directory
lib (dir), public(dir)
lib(dir)
my_app.rb, views(dir)
views(dir)
index.erb, play.erb, public(dir)
Public(dir) still holds the images(dir) and images(dir) still holds map.jpg.
2.) Note that the public directory name is not included in the URL.
I also adjusted the URL to this:
background-image: url("/images/map.jpg");
This solved the problem.
EDIT: Sorry, I didn't see the Sinatra tag on you post... I will leave this only for information, but sorry there I can't help you...
Only for rails:
The problem on your code is that asset-pipeline create a fingerprint after the file name to inform the browser when you update somenthing, you can't have access of folders inside the public folder (You can confirm trying to access the path on the browser: localhost/images/somenthing.*), only the root of it...
You can use the AssetsHelper for do the job for you!
<style>
...
.bg {
/* The image used */
background-image: url(<%= image_path('map.jpg');
...
</style>
If you try to do this on a *.css or *.scss file, rails will give you a error.
The solution for this case is:
*.css - *.scss
.bg {
/* The image used */
background-image: url(asset_path('map.jpg'));
Hope this answers your question :)
I am giving background image to hr tag like this.
<hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important">
Now i have saved the image locally. How can i set the path of my image in the above url.
My folder structure is
In app folder i have css, images, ts.
Inside ts i have html page and the above code.
inside images i have "hr-11.png".I specified path like this.
background: url('../images/hr-11.png').
But its not taking that path and no image is there. How can i correctly give the url path.
This will help you & inside example.html:
<hr style="background:url('../images/hr-11.png') repeat-x top left; border: 0"></hr>
also check with: background-image: url('../images/hr-11.png');
App
|-images
|-css
|-ts
|-example.html
There is a mistake in the path. The correct path should be like: background: url(images/hr-11.png) repeat-x 0 0
There are rules for url routing:
./images will go one level up. which means, if you are in css folder and you have a container folder of content for example, the path will search one level up meaning, content/images.
App
|-content
|-images
|-example.png
|-css
|-example.css
../images will go two levels up, if you are in css folder and you have a container folder of content for example, the path will search two levels up meaning, main_project/images.
App
|-images
|-example.png
|-content
|-css
|-example.css
~/images will search the entire folder for the given file,
for example from MVC:
~/Scripts/angular.js
/ Or non at all - Will search the current main folder:
Html/Index.html
App
|-Html
|-Index.Html
I changed my css files to do the following:
changed my_css.css.scss to my_css.css.scss.erb:
#mainLogo {
background: url('<%= image_path 'sprites.png'%>') no-repeat;
}
but it resolves to:
background: url("/assets/sprites.png") no-repeat;
If I place the same code on my home page (application.html.slim):
p=image_path 'sprites.png'
it prints out:
/assets/sprites-eab0989be1d5f5ba1c08c46728c2416b.png
Which is what I want.
How do I get the css file to have the fingerprinted version as well?
What I've tried? Just about everything, but here is a few things:
background-image: image-url("sprites.png");
turns into:
background-image: url(/assets/sprites.png);
(no fingerprint / digested filename)
Adding //= depend_on_asset 'sprites.png' to the css file doesn't seem to change anything.