The question is about using css stylesheets in your assets folder within the code igniter framework. If I want to reference a certain image for a css style, lets say for instance, background: url('../images/some_image.gif'). How should I reference this image, and what url should I provide. I'd like to do this in a way that I can put my image file in the image folder within assets.
There's no difference in regards to this because you're using Codeigniter, you can use /absolute/paths, full URLs, or probably the easiest way - relative urls.
The url to the image can just be relative to the <link>ed CSS file.
Example:
-assets
-css
screen.css
-images
bg.png
In your HTML:
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css">
From screen.css:
background:url(../images/bg.png);
Related
I have a web page with the following folder structure:
MyWebpage
- css
- layout.css
- img
- wallpaper.jpg
- js
- index.html
I have the following line included in index.html
<link rel="stylesheet" type="text/css" href="css/layout.css">
Now, I want to use the image wallpaper.jpg as the background for the <body> element. How can I use relative referencing here? Should I locate the file relative to the CSS file, like this,
body {
background: url('../img/wallpaper.jpg');
}
or relative to the HTML file, like this?
body {
background: url('img/wallpaper.jpg');
}
It really depends on where you are writing your CSS.
If you are writing an inline style or using <head> <style> tags in the HTML file, then use a path relative to the HTML file (../ in this case), as you are telling browser to load the image from the HTML file.
And if you are writing the style in the CSS file, the style is relative to the CSS file destination (no ../ in this case), as you will load the CSS file from the HTML file and the CSS file will load all the required resources.
I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.
the problem is that I have a css file that is pointed from my baselayout.jsp file as following, when I am in index.php it applies the css but when I move to Profile/view.jsp it does not.
when I look at the source I noticed it is looking the css file in Profile/stylesheets/Base.css rather than myproject/stylesheets/Base.css, how to point to it in a way that works on all pages.
<link href="<s:url value="/stylesheets/mycss.css"/>" rel="stylesheet"
type="text/css" />
Its a breeze, just change the address to solid address, as following
http://www.example.com/myPreoject/stylesheets/Base.css
I have a style sheet file which imports three other css files:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
style.css contains:
#import url("../ins/style.css");
#import url("commerce/css/style.css");
#import url("../in/custom.css");
I would like to improve the loading time and reduce the number of requests, so I want to combine the three css files into one in the same order as they are imported. but problem arise that all layout is messed up. I am really wondering why this is happening since import css file is the same as inlcuding them. any ideas? thanks for taking time to read.
If commerce/css/style.css is the CSS file that holds the layout, it could be that that path is not correct for all pages. I would ensure that all paths are relative to root to ensure that they are correct across the site. This includes the original href url for your combination css file.
I'm also not so sure if putting three imports in one css is less time for loading as opposed to linking them in the html. If you want to reduce load time you need to reduce number of loads somehow such as only loading internet explorer css when the browser is internet explorer etc.
Let me know of anymore developments.
You can try SSI includes, H5BP ant build script or even borschik to combine your CSS.
Let's say if I link to a background img in a css file url(img/bg.png), and the css file is at http://example.com/test/style.css and the img file is at http://example.com/test/img/bg.png
However I browse the page at http://example.com/index.html and i like to the css file via <link rel='stylesheet' type='text/css' href='test/style.css' /> with the base set to <base href="http://example.com" />
Would the css file work?
This should work
index.html includes test/style.css , which is a valid link
AND
style.css has /test/ as root so img/bg.png is also valid link
NOTE: as a general convention it's good to include ./ when referring to current directory best choice is to refer images like ./test/bg.png from your css file
See this answer: Using relative URL in CSS file, what location is it relative to?