I am facing a critical issue during my project. I am working on MVC model and in the view folder my css sheet is present. on which i put a code for the body element like this
body{
margin-left:250px;
background-image:url("/image/background.jpg");
}
MVC structure is like this
MVC---
-
- View
- css
-stylesheet.css
- Controller
- Model
-image
index.php
how could i able to fetch the code on css .. it's absolutely supporting me to fetch images on my html pages when i anchoring them. but it's not be fetching by stylesheet. please also specify the reason behind it as well.
body{
margin-left:250px;
background-image:url("../../image/background.jpg");
}
your style-sheet file is view/css so you need to get back with ../ two times to access image folder.
you can use this as
#base-url: "../../image"; /* path to image/ you can use http url also */
background-image: url("#{base-url}/background.jpg");
Related
I am new to PHP and just using it to make a login system for my HTML page. I was recently trying to make my HTML page into a PHP one so I threw all of the HTML into a PHP document and now everything works except for images. My CSS is connected to the page as well, but the background images do not work either, please help.
I am literally using images like this:
<img src='filepathhere'>
and for CSS and I am trying to use it like this for a background image:
body {
background-image:url('filepathhere');
}
None of the images will load. I am using file paths, which I saw may be the problem, but I don't know how to make them into URLs. Either way, I have no idea how to use PHP to display the images, and nothing I have searched for online has worked so far.
mainroute
images
htmlimage
<img src="C:\thinkfastrap\..."> will not work when you are serving the page via a web server since C:\thinkfastrap\... is not in the web root so the server cannot access C:\.... You will need to change your image URLs to something like /login/images/ThinkFastRapIcon.png.
For your CSS file, URLs must be relative to the folder where the CSS file resides. So this:
background-image:url('foo.jpg');
assumes foo.jpg is in the same folder as the CSS file. Based on the directory structure you posted, you probably want:
background-image:url('/login/images/BackgroundIMG.jpg'); /* Start from docroot */
or:
background-image:url('images/BackgroundIMG.jpg'); /* Go down 1 folder to images/... */
On my project work I have got two css file one for index-page another for home-page.I thought that I should keep those two css files on a folder so, if on coming days if i added more css files then it will be easy for me to find them all in one folder so, i did.I have one folder for images also.
My question is that when I add an image from css (background-image property) to my any page it won't display there but other images which were added from html img src=' ' property they are all displayed.
when i again placed that two css files from it's css folder to outside together with index.php,home.php then all those image which were not shown earlier by css background-image property were shown again! what may be the reason behind happening that???
I think you may have a filepath issue here, though I don't have much information to go on. If your css files are in let's say "main/css/" and you're trying to access an image in a directory above it, then you're either going to have to give the background-image src an absolute path or use ../ to break out of your current directory. Example:
if your image resides in the main folder 1 level above your css folder:
#myImage {
background-image: src("../myImagePic.png");
}
This is probably the reason why when you add the image from your HTML file that's in the main directory it works and then in your CSS which is located inside a CSS folder inside of the main directory it doesn't work. Hopefully this helps, didn't have much to go on.
index page is styled while rest of the pages are not.When i checked cascading style sheets(CSS) files in browser, I was surprised to see those CSS files are not accessible for all pages except of Index.ctp. All pages are in same folder and same links are given to access cascading style sheets then why those CSS files are not accessible for other pages.I tried enough to resolve this but could not. i tried to fin solution of this on Google but can't find any solution.
Include the stylesheets on default.ctp layout in View/layout not on index.ctp.
in your comment
controler name is FrontsController and folder iname is Fronts. css and js files are in css, js folders respectively. i using this way to add css file in about page. – user3623305 35 mins ago
add a comment
change path for css to be href="/css/reset.css"
Anyways it better to include your css files using html helper like this
echo $this->Html->css('css_name');
if your css file is at app/webroot/css, and it's name is main.css, use
echo $this->Html->css('main');
For more information look here http://book.cakephp.org/2.0/en/core-libraries/helpers/html.html#HtmlHelper::css
I have included a _construct() function into my BaseController to include CSS and Javascript using the Asset::add command. However, the CSS doesn't seem to be loading in. The view is loading correctly (so I know there are no errors or exceptions being thrown), but the CSS is not being applied.
For one view, I have:
<html>
<body>
<div class="banner-image"></div>
</body>
</html>
In the CSS, banner-image is defined as:
.banner-image{background:transparent url(/assets/images/hires_080820-F-5957S-987c.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
I have the assets folder inside my public folder.
However, the image is not loading on the page (the page remains blank). Any ideas why this would be happening?
Have you dumped the assets in the header anywhere??
like this...
<head>
{{Asset::styles();}}
</head>
But I think that only works with Laravel 3....
It is my understanding that assets are called differently in L4
Anyway....
I just echo them directly into my header views...Like so...
echo asset('css/yourcssfile.css');
or, if you're using Blade templating..
{{asset('css/yourcssfile.css')}}
Also...assuming your css folder is directly in the public folder like public/css
Then the path to your image background would change to this...
.banner-image{background:transparent url('../assets/images/hires_080820-F-5957S-987c.jpg') no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover; height:800px; min-width: 1200px;}
Because you need to get out of the css folder, so you apply ../
Also it's good to put single quotes around paths
Place the css and js files in the public folder, then load in them as the name.blade.php files are in the public folder too.
I'm creating a website/codeigniter-project that uses views which link to external CSS files.
Everywhere throughout my project/web-page's views I can control the URL paths of images, links, etc by constructing them from the 'base_url' setting variable. I don't have any control over static, linked external CSS files. This means that whenever my base URL path changes for my site I have to go through my CSS files and do global search/replaces to update all my paths.
To solve this I thought about creating a controller just to load CSS/JavaScript files and treating the actual files like views with hooks but I was talked out of this by #WesleyMurch in this question:
Using a controller to handle returning customized css & javascript files with codeigniter
How can I dynamically assign base-paths to my css assets so I don't have to do global search and replaces every time I update the base path of my site?
For this I use a view file containing css code with all the variables. The only change is that you should set appropriate headers for CSS
Create function style in your controller and set it to render appropriate view file (style.php). Code all your css with php code in style.php.
Set following headers at the start of the function:
header("ContentType: text/css");
header("Expires: <some far future expiration time or use mod_expires with apache>");