|
CSS - Problem Loading Image From Css File
Hi,
I have a problem when trying to load an image (as background) from a css file. My scenario is as follows; I have a css file named default.css under the folder root/css/. Then I have page1.html, page2.html and page2.1.html under the root/, root/page2/, and root/page2/page2.1/ folders respectively. My css is as follows: Code: body {
background-image: url('../images/bg.GIF');
}
My problem is this. The background image is loaded correctly when visiting page1.html and page2.html however when I visit page2.1.html I can not view the background image. Is this problem because ../images/bg.GIF is not accessable from root/page2/page2.1/ ? (even though the css file is always at root/css/) or? I have attached the example just in case my above explanation was not clear enough. What I would like to achieve is have the same background image loaded on each page. Regards, Sim085 Similar TutorialsHello dear programers This my problem If anyone can help me,I will be so thanksfull,: I have a full site script package which is in php,(I dont knoe php !! ) There is a style.css file,which I could change in colors and fonts,...but I want to change a page with new design and colors and style,I tried to edit style.css file (I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors. ------------------------------------------ I past the original style.css : form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;} .toptable { background-color: FF8D00; } a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active { color: white; text-decoration: none; } .forCopyright { font-family: Times New Roman; font-size: 11px; color: #EDD1D7; text-align: center; background-color: ff8d00; } body, td, .forTexts { font-family: Times New Roman; font-size: 13px; color: #000000; } a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active { font-family:Times New Roman; font-size: 13px; color: #F3FBB4; } .menutxt { font-family: Times New Roman; font-size: 12px; color: #000000; } th { font-family: Times New Roman; font-size: 12px; color: #000000; } .title { font-family: Times New Roman; font-size: 12px; color: #FFFFFF; background-color: #FF8D00; } .inpts { font-family: Times New Roman; font-size: 12px; color: #5D0400; background-color: #D1CDFF; border: 1px inset #000000; border-color: #000000; border-style:dashed; } .sbmt { font-family: Times New Roman; font-size: 13px; color: #1D0067; background-color: #cccccc; border: 5px outset #ffffec; } a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;} .line { background-color: 000000; } div.framebody { text-align: left; } td.inheader { background-color: cccccc; font-weight: bold; text-align: center; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } td.item { background-color: cccccc; } h3 { font-weight: bold; font-size: 12px; } td.gray { color: gray; -------------------------------------------------------- and this is my new page styles : .style1 { color: #4c687e; font-weight: bold; font-size: 11px; font-family: Arial; } .style2 { font-family: Tahoma; font-size: 10px; } .style3 { font-size: 12px; font-weight: bold; color: #FFFFFF; } .style4 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #c10416; } .style5 {color: #FFFFFF} .style6 { font-size: 11px; font-weight: bold; } .style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; } .style9 {font-size: 12px} .style10 { color: #0a2c50; font-family: Tahoma; font-size: 11px; } .style11 {color: #66809b} .style12 {color: #c10416} .style13 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; } --------------------------------------------------- If I change the fonts and colors in new page manually,The page doesnt come up at all. please help me if you can. best regards On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. On my website I've a few CSS files that I call. Occasionally a page will load and some text won't properly format... It will be too big. I'll refresh and it will go back to the size it's supposed to be. It's not all the text, just here or there. I've tried this on multiple computers and multiple browsers and it still happens only once in a while. Anyone know what is going on? Is there any way to diagnose this? It SEEMS as if part of the file isn't loading, but that doesn't sound right. Solution included in post below --- thanks. Hi, I am rewriting a series of webpage in CSS. the pages have a two column layout with a top area which has a banner effect. What I would like to do is to have the top and the left div's contain the same info on all pages. So instead of manually putting the contents of these div's in each page I would like to just create the contents in one file say top.html and left.html and load them in each page by using some sort of link. This would make any changes to the contents easy, edit one file instead of many. I am CSS newbie so I would be greatful for any pointers. Thanks, R Haynes Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. Hi I need some help in linking the image file to css... I have my html page in root folder(project file), css file in "root/css" folder and my image file(bg.jpg) in "root/image" folder. I can link my css file to the html page. But the thing is everything working except the image property in css. i have to link the root/image/bg.jpg to css file. I used(obviously i know it wont work) the following code: #innercover{backgroud:url(images/bg.jpg)} i knew this code will search for the images folder in the current position(css folder) and so its not working... So would you please suggest me the right way to link the image file? i ahve seen sites, using one image rollover that has one image one on top of the other... can someone give me a clue on the syntax thanks Okay, I have this weird problem. If I put my background style inline, it works. If I put it in the stylesheet as the first rules in my file, it doesn't work. Here are the rules. Code:
/* the below line is the first line in the file, this comment is not present in the file */
body{
background-image:url('image/metal.png');
background-repeat: repeat;
margin:0;
padding:0;
}
Again, inline as Code:
<body style="background-image:url('image/metal.png');">
it works, but in the stylesheet file, it doens't. The rest of the rules in the stylesheet work, just this one does not... hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server. the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine. Hello all, I had a simple question, I don't understand why all my html code move and not only my body code in the html. Actually, I only want that the code inside the <body> and </body> move with margin or padding. But I wrote a line that only draw a line of color, and cannot understand she is moving alsot when I adapt the css. Here is my html file : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>This is our title.</title> <link rel="stylesheet" media="screen" type="text/css" href="./myCss.css" /> <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /> </head> <table width="100%" bgcolor="#003399" style="height: 17px;" border="0" fra me="hsides" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"></td></t r></tbody></table> <body class="ourBodyWiki"> <a href=.>start</a></br> <p> Bienvene sur la premiere page de dokuwiki ! </p> <p> Commencons par creer deux liens : </p> <ol> <li class="level1"><div class="li"> Notre premier lien : <a href="linux.html" cl ***="wikilink1" title="linux.html">Linux</a></div> </li> <li class="level2"><div class="li"> Deuxieme lien : <a href="bsd.html" class="wi kilink1" title="bsd.html">BSD</a></div> </li> <li class="level2"><div class="li"> Troisieme lien : <a href="microsoft.html" cl ***="wikilink1" title="microsoft.html">Microsoft</a></div> </li> </ol> <p> Ceci est une premier version ! </p> </body> </html> And here is my css file, in the same directory as the html file : Code:
.ourBodyWiki{
margin: 10px;
padding: 20px;
}
p{
margin: 0px;
}
Can someone help me please ? I am still newbie in css and html but I only need to do simple things. I've downloaded a web template he http://www.freewebsitetemplates.com/preview/dogstemplate/ I've been re-working it to fit what I need, but I've run into some problems with the CSS. I want to center my images that I place, but I can't seem to figure it out. For whatever reason I'm not able to attach my html or css file. So I've uploaded a zip file with them to: http://www.tombraiders.net/katie/css.zip If any of you would be able to help I would be so appreciated! I'd also like to move the image down a line as right now it's right under the previous line of text. Thank you! Hello, I don't know whether this is the right forum for my issue, so apologies if it isn't. To better understand the problem, kindly visit this page: http://www.lightblu.com/contact.php Basically, you see those 4 social networking logos? They are at the right position. However, when you click "Submit (without writing anything anything in the form), the errors will display, and the logos will shift downwards as a result. I don't want this. I want the logos to be at the same position. Question: how could I do this? I'm trying to find the logic first before implementing it, which I can't even figure out. Thanks guys I have a <ul> which uses a list-style-image as a bullet, positioned outside. In FF this works fine, but in IE the bullet sometimes displays, sometimes appears obscured. It doesn't appear to be the flickering effect that other posts about bullets have mentioned. It is static and changes only on refresh. Code: #content ul {
list-style-image: url(../assets/bullet.gif);
list-style-position: outside;
color: black;
vertical-align: middle;
}
#content li {
color: black;
line-height: 1.8em;
font-size: 12px;
}
Code: <div id="content">
<ul>
<li>organisational development, training and coaching</li>
<li>learning</li>
<li>children's services</li>
<li>evaluation and qualitative research</li>
<li>public sector policy, strategy and enterprise</li>
<li>partnership support and communities projects</li>
<li>working with difficult and complex issues</li>
<li>building capacity and capability</li>
</ul>
</div>
It happens on a couple of other computers too. The page is XHTML 1.0 Strict. I tried to use a background image instead but would prefer not to do it this way. Any advice would be good. Page is at sample page I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this this is just an example : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS Code:
div#top p {
background:url('image/logo.gif');
}
I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one well hope you can help me my code is below Code: <style>
.myclass{
color:white;
background: black
url(http://img-cdn.mediaplex.com/ads/3976/22164/408x27_uom.gif)
no-repeat fixed
top left;
height:100%;
}
</style>
<table height=100% width=100%>
<tr><td class=myclass>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
aaaaaaaaaa<br>
</table>
result of IE http://img103.echo.cx/img103/7196/ie7ab.png and Moz http://img103.echo.cx/img103/9229/moz0jq.png this code works with IE without being any problem in IE, if scroll is bottom, background image doesnt come to bottom. but Moz, it does please help me.. Hello, I have created a design in photoshop which has been sliced into a number of smaller images. I am then trying to reapply the design as a series of background <td></td> elements, using an external css. The style is: Code: td.tablebackground
{
background-image:url('/media/headerarea/topnav_search.jpg');
background-repeat:no-repeat;
width:40;
height:10
}
This works fine in IE6 but doesn't show in Firefox. Can anybody please suggest a way around this? I have also tried defining a class to attach to an <img> tag but this always places a border around the image even if border=0. The external css for this is: Code: img.tablebackground
{
background-image:url('/media/headerarea_red/topnav_search_red.jpg');
background-repeat:no-repeat;
width:40;
height:10 ;
border-style:none; // also tried border:0;
}
Many Thanks, J |
|||||||