I'm trying to apply a background-image to a header in a site.master file. If I use:
background-image:url('./themes/Modern/images/bg_full.png')
It works fine for all root level pages, but for any dynamic pages higher up directory structure it does not apply. So I changed it to:
background-image:url('~/themes/Modern/images/bg_full.png')
But when I do this the image does not show on any of the pages. Any help appreciated.
CSS is client based. Basically what your code does is creating a GET request like: http://domain.com/css/~/themes/Modern/images/bg_full.png
You probably want something like:
background-image:url('/themes/Modern/images/bg_full.png'); since this will result in a request like http://domain.com/themes/Modern/images/bg_full.png
background-image:url('http://your-domain-host.com/path_to_images/bg_full.png');
try it if not working then give me your page url i will give you exact code
Related
I have just recently implemented the five star rating system from ajax, into my asp.net site. Everything works fine in locall debug mode.However. Once i publish it, the css does not show up. I have declared all of the css within the content page, not sure if this is why. I am very in-experienced with working with css; so i am sorry if it something simple.
I have checked the spelling of the image url, and have also tried implementing it into the site.css. But as i said, i am in-experienced; so am not sure what to do here.
This is my code as it stands:
The css declared at the top of the content page:
http://codepad.org/m1w39Hep
The reference to the css from my rating control:
http://codepad.org/Kl0BKets
Thanks in advance!
Check if your css links is right and your css files loaded successfully
I have seen your code.
Give extention as ".css" and not ".c"
I dont think that you can use Codepad for that because it does not give support for CSS.
If you are not using Codepad
Then as you are deploying it in server then check the URLs of the Images that are present in the CSS file for rating/.
I am trying to include a background image using a relative link in the css.
My tree looks like this
/_css
/_css/gcrm.css
/_images
/_images/bg-grad1.gif
The css I am using to use to call it is like so
background-image: url(../_images/bg-grad1.gif);
It displays as expected in Visual Web Developer however when I put it on the web, no background. When I inspect element in Chrome this is the linked file
mysite.com/_css/../_images/bg-grad.gif
Unfortunately I cannot link to it with the / root as I am trying to setup SSL and my hosting company has allowed us to use as shared cert that mirrors the site 1 level deep in the domain tree.
I must be missing something incredibly simple but I can't figure out what it is to get it working.
Your url looks fine in regards to your file structure. Assuming this is your file structure:
/_css/
...
gcrm.css
...
/_images/
...
bg-grad1.gif
...
From the fact that it's actually outputting the .. in the url in the code, maybe you need to enclose the url in quotes:
background-image: url("../_images/bg-grad1.gif");
Use following code:
background-image: url(../../_images/bg-grad1.gif);
I am new to web design and I think I need to convert a jpeg into a url. I have an image saved locally on my computer. An example website that I am using as a reference has a one page for their html/source code and a different page for their css. All of the images are listed under the css page, however, they are typed in as a url. For example url(..green sea.jpeg) When I try to replace their css code with my image, it can't be found. I know I'm new, so I figure I must be making a simple simple mistake, but everytime I try and look it up online, I find directions on how to convert a jpeg into a url and it looks like you need another kind of software to do this, but I'm not exactly sure. Any help/direction would be very much appreciated!
Thanks!
When you replace your image name for the one you see in the CSS:
url(..green sea.jpeg)
...make sure that the image you are wanting to use is in the same location (folder / place) as the green sea image.
So if I want to replace it:
url(..myNewimage.jpeg)
I would make sure it was in the same place as the image I'm replacing it with.
ALSO, I just noticed that your path is wrong. You have ".." when it should probably be "../".
So try this:
url(../green sea.jpeg)
The url you need for your code is just wherever you have posted the image on your server in relationship to the css file. For example, if your directory is structured like this:
/CSS
-style.css
/JS
/images
-green-sea.jpg
index.html
Then your url would be (../images/green-sea.jpg)
This is probably something really simple but I cant see what!
Any images I have in a masterpage aren't showing up in child pages,
all I get is the box with the red cross in it.
I don't think Ive done anything different from usual and it's not something that's
happened in other sites so im kinda scratchin my head with it.
Any ideas are appreciated!
Kevin's got the essence of the problem right - your URL in your master page is likely relative to the location of the master page, and when it's included in the child page, the relative reference isn't correct anymore. The simplest solution for this sort of thing is to have your master page URLs be relative to the site, not the page. In other words, if you've been doing
<img src="images/picture1.gif">
You need to replace that with
<img src="/images/picture1.gif">
or something similar.
in the master page you use the image src similar to the below line and this will work. this same problem solved usig this way.
src="<%= Page.ResolveUrl("~")%>Images/myimage.png"
Did you give the image runat="server" and use a root relative "~/" path to the file?
The URL to your image is incorrect.
Try using absolute paths to your images.
I've had this problem when using a master file with content pages in different subdirectories.
If you use relative paths to your images, thay should be relative to the content page, not the master.
Edit: This is true if you use the img tag to display your images. asp:Image behaves better =)
It definitely sounds like you have a pathing problem. View the source to your rendered page and take a look at where it's trying to load the image from, that should help you fix your path.
If you set the right path then also you are getting the same problem then you can try this will definitely solve your problem:
Use double dots(..) before the starting of url.
If Content pages are located inside subfolders this problem arises. When a content page is rendered the markup is generated afresh for the master page content as well, and the location of an image may render differently as it appears in the master page. The best way is to replace with asp:Image control instead of HTML image tag. Then define the absolute starting with:~/ to actual location of the image. This should solve the problem. Please remove the entire image tag before inserting asp:Image as attributes are different for both.
Good Luck !!.
If you use image<img> tag instead of this, please use "style="background-image: url('/Images/welc.jpg');"in any other tag. This looks like a silly.But it works for me. I was also getting this problem,after using this thereafter I got image at all my child pages.
I'm having a problem whit this website i'm building - www.bodyheat.uk.com .
The first page (home) appears as i "wrote" in the css, but in the other ones the webpage it seems that the webpage cant call the css.
Anyone can help me on that?
TRICAT answered this
"You must have the base of your urls in the pages wrong because the css and js are using a relative url including the name of the page..
/joomla/index.php/templates/system/css/system.css
And obviously it should be:
/joomla/templates/system/css/system.css
The www.bodyheat.uk.com works because it doesn't have a page name behind the url."
But where I can change it? In what file? configuration? I saw what you said but dont know where to go to change it :(
THANKS ALL!!
You must have the base of your urls in the pages wrong because the css and js are using a relative url including the name of the page..
/joomla/index.php/templates/system/css/system.css
And obviously it should be:
/joomla/templates/system/css/system.css
The www.bodyheat.uk.com works because it doesn't have a page name behind the url.
I had this problem as well when I was creating a custom template. In the Global configurations, under SEO Settings, I turned OFF 'Search Engine Friendly URLs'. This fixed my problem.
Thanks!