I'm trying to design my ionic app, and the first step for me is to add a background image. But it won't get visual.
I created a directory in my www folder named img, containing my image.
And in my homepage (home.scss) I've added this code:
page-home {
background-image: url(../img/logo.JPG);
}
This is the errormessage I'm getting:
"This inspection checks references to files and directories."
I guess "page-home" is the name of your component selector.
Instead of putting the background-image directly inside it, you can try to put it inside (if your .html has a , without code, it is hard to tell)
page-home {
ion-content {
background-image: url(../img/logo.JPG);
}
}
Note: since your file name is "logo.JPG", I am wondering: are you trying to make some kind of splashscreen? In that is so, you may prefer directly put your image in the resources folder and configure the splashscreen in your config.xml
Related
I'm creating a Spree store, and trying to make a button use an image instead of the default button that is included with the extension (and bootstrap). I can target the proper button in CSS, and deactivate the background color, border, etc. The background url doesn't work for the image (path: "app/assets/images/heart-icon.png"), but it works fine for any external image url.
I assume my problem lies within the asset pipeline, but I can't figure out the proper path to set as the url.
From my .css file:
form.new_wished_product button.btn.btn-info {
background: url(assets/heart-icon.png);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
color: transparent;
border: none;
}
The button doesn't need to change when hovered or clicked -- it's just a simple image.
Thanks!
EDIT:
I saw the related question but thought mine was different because I had tried those solutions. I was trying to do this with plain CSS and changing the file extension to .css.scss worked for me.
Have you tried the image-url() helper instead of url()?
image-url('heart-icon.png');
This will find the asset within your site's file structure.
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
I have a Folder Structure as it folows:
App_Data\Sitefinity\WebsiteTemplates\MySite\App_Themes\Mytheme\Images
I have images in the Images folder.
What should be the url in main main css file which is used as a theme for most of the pages.
I have tried different variants but unsuccessful.
The css file is located in:
App_Data\Sitefinity\WebsiteTemplates\MySite\App_Themes\Mytheme\Global
Unsure what you mean, but if you are trying to reference a url in a different directory use the following:
div { background-image: url('../Images/example.jpg');
...instead of:
div { background-image: url('/Images/example.jpg');
I would put the Images folder under the \Global folder and then in the main css just reference the images by url(images/sprite.png) for instance.
To add images in Sitefinity, you go to Content | Images menu. Then you click on Upload Images button to select an image from your local drive.
To create a folder so you can put your images in, you select Create a Library button. Then you upload your images to it.
To reference the image, just click on it, and select View in Original Size.
That will give you the URL to the image.
Example:
http://example.com/images/default-source/MyImages/img.jpg
Then you can use that URL to reference your image in your html style:
body {
background: url('http://example.com/images/default-source/MyImages/img.jpg') no-repeat;
}
I have a welcome controller, and a welcome.css.scss layout. In the welcome layout there is this code:
body {
background-image: url("/assets/images/sampleimage.jpeg");
background-repeat: no-repeat;
}
In assets/images I have a picture called sampleimage.jpeg which I want to be my background for the welcome index view.
I have all of the above, but I get neither a a background image or an error message. Thanks for your help.
Since you're using SCSS, let me give you some ideas...
--
Asset Paths
Firstly, what you need is asset_path helpers, allowing Rails to call the assets regardless of whether they are in the standard "asset pipeline", or in the precompiled "static" assets area
The immediate issue you have is that you're calling a naked url on your background-image property. This will not call the file you need, as since the path is relative, it cannot be called (try accessing /assets from your browser)
The way to do this is as follows:
#app/assets/stylesheets/welcome.css.scss
body {
background: {
image: asset-url("sampleimage.jpeg");
repeat: no-repeat;
}
}
The asset-url path is possible because of how the SCSS/SASS elements of the Rails asset pipeline preprocesses your asset request
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}
I am using basic template for mvc 4.I want set background image for my div element.My stylesheet located in "~/Content" directory.Here is part of my .cshtml file where I am trying direct specify image without css:
<div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>
Here is my css:
#add_image {
background-image:url('~/add.jpg');
}
#add_image:hover {
background-image:url('~/addhover.jpg');
}
.image_bar {
width:40px;
height:40px;
}
Neither css neither direct "styling" not works - whats wrong? Thanks.
In your second example, you are using the '~/' moniker, this is a .NET thing that instructs the code to look at the root of the site. Since the .NET engine does not process your CSS file, the '~/' has no effect and probably makes a really ugly HTTP request to the server.
Since you have your CSS in your Content directory, one solution is to create a sub directory in your Content called 'images'. Store any and all of your CSS images in that folder. Then, from your CSS file, you can call and reference images in that file as such:
#add_image {
background-image:url('images/add.jpg');
}
#add_image:hover {
background-image:url('images/addhover.jpg');
}
This is assuming a directory structure like so:
Content
images
add.jpg
addhover.jpg
site.css
Though I am not a designer, I believe that CSS will look for images relative to the location of the CSS file and not the root of the web application like HTML. Additionally, if you stored images in the same directory as your CSS file, then you should be able to call those images without the 'images/' prefix. However, most like to keep resources separate.
Instead of
background-image:url('~/add.jpg');
try using
background-image:url('./add.jpg');
try with
background-image:url('../add.jpg');
try this
**example -
background-image:url('../img/home_bg.jpg');**
background-image:url('../**ImageFolderName**/add.jpg');