I am allowing users to choose their theme folder /views/theme/images/ theme can be chosen by the user. The css is in the theme folder along with the image folder.
.header {
float:left;
height:100px;
width:100%;
background-image: (/images/bg-nav.png);
}
and I have tried lots of different image paths in the background image but it's not showing I have tried /views/default/images/bg-nav.png, I've added dots, forward slashes etc.
The image does exist in the following folder: /views/default/images/bg-nav.png can someone help me to display and find my image :/
Here's my html css include
<link href="/views/<?php echo $system->theme(); ?>/style.css" rel="stylesheet" type="text/css" />
It is including fine the stylesheet is working
In your example code above:
background-image: (/images/bg-nav.png);
Should be:
background-image: url('/images/bg-nav.png');
You are missing the url. Check the syntax.
Related
I have a hard time adding picture through background-image property in css
my file structure looks like this:
www
styles
stylesheet.css
images
background.jpg
I tried:
background-image: url("/images/background.jpg");
background-image: url("images/background.jpg");
background-image: url("background.jpg");
background-image: url("../images/background.jpg");
background-image: url("/../images/background.jpg");
background-image: url("../../images/background.jpg");
I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?
www
index.html
styles
stylesheet.css
images
background.jpg
that the directory, here inside index.html / index.php (where u want show)
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
remember for href link
and then at stylesheet.css
background-image: url("../images/background.jpg");
background-image: url("../images/background.jpg");
This is correct. If it is not working, perhaps the path name is not the problem.
Are you running this from a server?
Or, are you running this from your computer?
Try changing the situation and see if anything changes.
I'd put my money on spelling mistake, though. Best to triple check it.
with symphony framework I did dump assets assets:install.
css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?
background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);
but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:
background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);
But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?
please advice.
First of all, make sure that your css and images are inside correct folder.
src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg
After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.
web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg
And your style.css file should look like this:
background-image: url("../../images/top_bg.jpg");
However, if you are configuring the css directly on twig template, the url is different:
<style>
div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>
To make it work in twig try this
<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,
of course presuming that you have installed the bundle's web assets under a public web directory.
I solve this issue with the following steps:
First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest
i.e:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
.header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>
Your background image is correct changed. The output looks like:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
.header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>
This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
I'm trying to create a webpage using a "central" CSS external sheet that is called by THREE HTML files. The problem that I have is to do with background color; each HTML file should have a different colour. I start off by adding the line
<link rel="stylesheet" TYPE="text/css" href="EuropeanCountries.css" />
within the and of my HTML file called "France.html". I add exactly the same line within the and of my other two HTML files called "Italy.html" and "Germany.html". I then add the line inside "France.html" and inside "Italy.html" and inside "Germany.html". Then, I go to my css file called "EuropeanCountries.css" and I add the lines
body#page1{background-color:rgb(255,0,0);}
body#page2{background-color:rgb(0,255,0);}
body#page3{background-color:rgb(0,0,255);}
I then save ALL the HTML files and css external sheet inside the same directory. I then try to open "France.html" with the Opera browser and the background color is WHITE, which is what it should NOT be. The background color for the other two HTML files are ALSO white! So something is wrong. When I link ONE HTML file with the css file, eg. "France.html" with "EuropeanCountries.css" (and there are no other HTML files in my directory), the background color works just fine. But when I try to link multiple files with one CSS file, things go awry. Can anyone please point out to me exactly where I've gone wrong?
according the css, your body should have tags:
<body id="page1">...</body>
etc,
but I'd go with
.red { background: red; }
.green { background: green; }
.blue { background: blue; }
and
<body class="red">...</body>
correspondingly
Before updating my css, I had the following in Login.css:
body
{
background-image: url('./pictures/fond.png');
background-repeat: repeat-x;
}
Here was my structure:
Now I have the following css:
body
{
background-image: url('../pictures/fond.png');
background-repeat: repeat-x;
}
Please note the double point in the url.
Here is my new structure:
My problem: when publishing on my IIS test server, I cannot see my pictures!? On local dev machine (VS2012) I can see my pictures.
BUT If I update my Login.css located in my IIS test server and replace my double points with a single point it works again. It is not logic because (after my update) the Login.css is now located under the css folder.
Any idea?
Thanks.
UPDATE ----------------
Here is the way I refererence my css:
bundles.Add(new StyleBundle("~/Content/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
I created a bundle and then:
#Styles.Render("~/Content/bundleLogin")
I bet you have hardcoded the path to your CSS file in the view, like that:
<link href="Content/css/Login.css" rel="stylesheet" type="text/css" />
instead of doing it the correct waywhich of course is to use an url helper:
<link href="#Url.Content("~/Content/css/Login.css")" rel="stylesheet" type="text/css" />
As far as your CSS file is concerned, all urls that you are referencing there (such as images) are always relative to the current location of the CSS file. So if you properly reference your CSS file you will not have any problems. Using url('../pictures/fond.png'); is the correct relative location.
UPDATE:
Oh, I see the problem. You are using bundles. Well, the problem with bundles is that the way you declared the name of your bundle, you do not have the same level of folder nesting as the physical structure. So modify your bundle like this:
bundles.Add(new StyleBundle("~/Content/css/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
and then:
#Styles.Render("~/Content/css/bundleLogin")