I've added a jpg file to the App_localResources folder and in the document properites specified the photo in the Background propery. In the designer it shows up as the background but when i run the page i still get the white page background.
There's no distinctly ASP.Net way of doing this.
The canonical HTML way is to include this CSS:
body { background-image: url('background.jpg'); }
If you defined the body tag with runat="server" you could add the style inline using the Attributes property, but this wouldn't be a good idea. Layout details like this should go in the Stylesheet.
Guessing that perhaps you have a stylesheet which might be overriding the background?
I would check if the built in web server was still running and stop it, then re-run your application.
* Right click on the tray icon and select "Stop".
The page is being cached, you should see your changes now.
I used fiddler to trace the calls on the image. App_LocalResources\*.jpg return an 403 error. The App_LocalResources folder is really for use for localization. If I move the image into an image folder it works fine.
Also rather than setting the Background property, use the Style property and the background property there.
Sometimes you need to clear the cache of the browser after making changes to backgrounds and colors in order for it to apply when you run the site the next time.
Take a look here:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache
Related
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
We have had an applet built for us in JSFiddle. It only works though when one ticks the box that says normalized CSS. How do we activate that on our website. I have never heard of it.
Any ideas?
Marvellous
http://doc.jsfiddle.net/basic/introduction.html?highlight=normalized#choose-framework
Next is the Normalized CSS checkbox, selected by default. If selected, the fiddle will be rendered with normalize.css which is removing most of the browser styling of many HTML tags.
You'd want to include the following file in your template/pages.
http://jsfiddle.net/css/normalize.css
I'd recommend copying it and referencing a local copy rather than referencing it on their server though, that's bad form :)
What the normalized CSS is on jsfiddle is a CSS Reset
To add it on your site, copy in paste the following code: CSS Reset
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.
The boss wants the master page's menu to look nicer. I generated my gradient file with one of the tools available on the net, no problem there..
I tried to make a CSS class for each menu item but when I use the background-image directive and the style builder, I get a line like:
background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')
...when what I want is
background-image: url('~/Images/Gradient.png')
The first url will, of course, only work when I'm debugging on my local machine - deploy this and I'm hosed. So many other ASP.NET objects work with "~/" to indicate the top-level directory of the website but my css file doesn't like it and I can't set a background image for the menu control or the menu items - seems like a GLARING omission when I can do it to so many other controls.
What am I missing?
The url in your CSS needs to be an absolute (or relative) url and not use the tilde mapping as it is not a server-side component.
background-image: url( "/images/menu.jpg" );
You're almost there... try this:
.menuStyle
{
background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root. No slash would be relative to the current directory. */
background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}
Hope that helps.
It's not a glaring omission. Not an omission at all. The tilde is an ASP construct. In your CSS it won't have any meaning.
One "replace all" operation and you're set.
Replace file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite with blank.
I have tried setting the background-image property from CSS in my ASP.Net application (i.e. giving the relative path as described in the post). However, it did not work for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); it did work..
Please let me know what is the correct approach, and the reason why it didn't work before.