|
CSS - Linking The Image File To Css
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? Similar TutorialsHi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hello everyone. I want to link a .css file to my php script. I tried ti include the .cc file but it gave me an error about include_path. I made sure the pathname was correct and it didn't work. Does anyone have any ideas? 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 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... 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 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 I do not know if this is the right forum. I guess I go in here and try. Its a bit of CSS, html question. I have webpage which is devided into three sections. headermain.php main.php footer.php I do have my link to CSS-style sheets in the headermain.php file. The problem is that I am not sure how to link CSS-styles into main.php and footer.php Here is how it looks: The three files and index file. index.php <?php include(".include/headermain.php"); ?> <?php include(".include/main.php"); ?> <?php include(".include/footer.php"); ?> _____________________________________________ headermain.php <!-- start headermain --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Webdesign for private persons and small companies</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="../CSS/main.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="#003366" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="90" bgcolor="#000000" border="0" bordercolor="#" cellpadding="0" cellspacing="0"><tr><td align="left" valign="top" width="100%"></td></tr></table> <!-- end headermain --> (there you see a link to CSS) ___________________________________________ main.php <!-- start editing main.php --> <center> <!-- start editing --> <table width="700" height="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top" bgcolor="#999999" class="main">Site under development. </td> </tr> </table> <!-- end editing main.php --> </center> ________________________________________________ Footer.php has pretty much the same as main. My question is how to include the CSS-Style sheets fot the main.php file that I made? I will try some actions and maybe wait for an answer ... Thank you very much indeed for all help. Hello all, I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page. HTML: <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <title> The Shore Report </title> </head> <body> <img src="TheShoreReport.jpg" > <img src="Web Background.jpg" > </body> </html> CSS: body { background-color:#b0c4de; } Is there something wrong with my link or what? Hello I know nothing about web pages but I have a class assignment to create a clothing website displaying the different types of clothing when you click on the gender button. My question is how can I add the different images after selecting the button. For example I have a menu button for accessories and want to display several pics of the accessories also showing that the quantity of the item. Please help if you can. Thanks I have two divs on my page. Left and Right Is there any way that I could get a link in the Right Div to open on the Left Div? hello, i am new here, and this is my first post. i am working on adding css to my html website, so i was suggested to create a different .css file and put all the styles in there, and then just add a link in my .html files to my .css file. the link from the pages to the .css file is fine, i checked it over but here it is, please point out if i missed something. (by the way all my .html and my .css files are in the same directory.) here it is: <link type="text/css" rel="stylesheet" href="style.css"> so my question is, how do i get the changes from when i save something in the .css file to go into the .html files. just for an example, could someone tell me how to make the background be black, and the text be white? please put it in html form. right now i have this in the .css file but nothing is changing: body { color: white; background: black; } is that right? or am i missing something? Thanks for the help. On my site, I'm putting the main site navigation underneath the main pic. And I have 10 images(every single one is same height), and the images include: Left Beginning Spacer 4 Link Images 4 Mouse Over'd Images(same as previous 4, only colored diff for when the mouse is over) Right Ending Spacer But, when I go to do them all, the linked images get bigger that the spacer image, so it doesn't line up(I even defined the width and height in the img src tag). The linked images seem to even have a border around them. And finally, to boast the last spacer isn't even on the same line as the rest of the images. >.< Could someone help me out here please? I'm not sure there is something in CSS that can help me achieve what I want, but here's the link: http://s125392025.websitehome.co.uk/layout2.html Please help. if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead? Hi Guys, I was just wondering if it is possible to link to a div layer which is on another page but is actually a switchable div (hiding divs and showing divs in the same exact place). For example the word 'Link' from one page linking to a layer on the next page called 'Layer'. The 'Layer' link being a Div which is currently hidden but gets shown because of the link? Would it be something like '(/example.htm#Layer?) Please help! Thanks, Mark Hi all I am trying to take a link's ability to link away from a link by converting it to normal text ie, I am working on pagination for my blog and the navigation looks like this << Prev | 1-5 | 6-10 | Next>> its all done in php that i got from a book, but anyway, the script references a span class="inactive" so that when you are viewing 1-5 both the << Prev and 1-5 links are grayed out, since there is page previous to the page that displays 1-5 there is no need for that to be a link, nor is there a need for 1-5 to be a link since we are already there what i need is the style that would remove the linking property of those links and i got no ideas, Im bad in php and even worse in css Thanks in advance I have been going through the tutorials and forums learning CSS. Everything works and makes sense until I get to the lesson for setting up a div box. For some reason I am missing something here. None of the lessons or forums even address or talk about how to connect or input the external div CSS into the web page. They only show the external CSS code or internal CSS code. They never show what is required in the HTML to pull in the external div CSS. Even when I copy and paste the code from the different lessons I can not get a div box unless I put it in-line in the HTML code with a <style> tag, which defeats the concept of using an external CSS for the div box. How do I link an external CSS div.box to the default.htm web page? What coding is required in the external CSS and in the default.htm HTML to have the div.box brought into the web page? Does the div.box code have to have its own .css file to work? How do I get the external CSS code for the div input to the HTML? Thanks Is there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ... I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS! Code: <html>
<head>
<title></title>
<style type="text/css">
.hidden {position: absolute; visibility: hidden}
#netcalltext
{
z-index: 1;
position: absolute;
top: 2px;
left: 2px;
}
#d1
{
z-index: 2;
position: absolute;
top: 2px;
left: 2px;
}
</style>
<script language="JavaScript">
<!--
function showIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "visible";}
else
{if (document.layers)
{
document.layers[obj].visibility = "show";}
else
{document.all("d1").style.visibility = "visible";}
}
}
function hideIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "hidden";}
else
{if (document.layers)
{
document.layers[obj].visibility = "hide";}
else
{document.all("d1").style.visibility = "hidden";}
}
}
//-->
</script>
</head>
<body>
<div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
<div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
</body>
</html>
Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty I want to construct a page like this... Obviously, I could build a 'rigid' page in the old-fashioned way with tables, trs, and tds but I'd like to provide something a bit more flexible with divs that could survive a bit of strectching, changes in font size, etc. Can you see what I'm getting at? I'm not looking for a complete solution, just a few pointers as to whether it's doable/worthwhile and how one might approach it. Help please I'm getting knowhere fast, I am trying to load stylesheets dependant upon the browser in use. I have read lots on this on the net and in fact most of this code has been borrowed from better people that I. If I use the stylesheets in a normal hardcoded <LINK...> they work fine. If I put an alert("You are here") in each of the if() statements it runs the code and the correct if() is run for each browser under test. But, there is always a but, the styles are not applied to the document for any browser. In fact the page displays without any styling at all in all of them. I have tried debugging with Mozilla's JavaScript Debugger and on examination the styles are being loaded into the DOM but not applied to the document. It is as if they are being applied to late to take effect. This is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="Content-Language" content="en-gb"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script language="javascript" src="file:///D:\TestSite\JavaSrc\sniffer2.js"></script> <script language="javascript"> <!-- if(is_nav) { document.write('<LINK href="CSS\nav\BasicSite.css" type="text/css"rel="stylesheet">\n'); document.write('<LINK href="CSS\nav\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\nav\IndexExtra.css" type="text/css" rel="stylesheet">\n'); } else if(is_ie) { alert( "IS IE" ) document.write('<LINK href="CSS\ie\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\ie\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\ie\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } else if(is_moz) { document.write('<LINK href="CSS\moz\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\moz\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\moz\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } else if(is_opera) { document.write('<LINK href="CSS\opera\BasicSite.css" type="text/css" rel="stylesheet">\n'); document.write('<LINK href="CSS\opera\MenuLayout.css" type="text/css" rel="stylesheet">\n'); document.write('<link href="CSS\opera\IndexExtra.css" type="text/css rel="stylesheet"">\n'); } // --> </script> </head> <body> I hope this is dead obvious to one of you experts. Thanks in advance |
|||||||