November 8, 200916 yr Hi everyone Was just wondering how I take a small image and repeat it in the background (the space behind the actual web page, is this still called the bckground??) so I end up with the same affect as on this site (grey Jazz Cafe logo repeated..) ?? http://www.jazzcafe.co.uk/now_booking.asp?currentDate=11%2F23%2F2009 Cheers Rich
November 8, 200916 yr It's done in CSS using the "background-repeat:repeat;" instruction - see code from site ... body { background-color:#000000; background-image:url(../images/layout/back_tile_sm.gif); background-position:left top; background-repeat:repeat; color:#000000; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:normal; margin:10px; padding:0; text-decoration:none; }
November 8, 200916 yr create a new file called style.css, put the above code into the file Upload to your webserver, and then in your html put the following line <link rel="stylesheet" type="text/css" href="style.css" /> put that between the <head> and </head> tags
November 8, 200916 yr Author Right ive got all that done so now if my web site folder is on my desktop, where do I start my url from or what would i put in there?
November 8, 200916 yr Right ive got all that done so now if my web site folder is on my desktop, where do I start my url from or what would i put in there? just open the html page with a browser and it should load the "webpage"
November 8, 200916 yr Author ok ive got the url fr now (when it is on my desk top) but what about when i publish the site and upload it to my server, will it still work becuase the url wont be the same?
November 8, 200916 yr ok ive got the url fr now (when it is on my desk top) but what about when i publish the site and upload it to my server, will it still work becuase the url wont be the same? when you upload it on your server, just type the link to www.mydomainname.co.uk It then should load the page, but the html needs to be saved as index.html only the homepage needs to be that though
November 8, 200916 yr Author no i mean this what i have at the moment: background-image:url(C:\Documents and Settings\richard\Desktop\sc_site\background_logo.jpg); so when it goes online obviously it will no longer be on my desk top? So how do i get over this? is this the correct url??
November 8, 200916 yr change that to just "background_logo.jpg"... You only need the address part if the file is in a different file
November 8, 200916 yr Author ps is there a way to put a drop shadow around the outside of my site, could it go in the above bit of css code??
November 8, 200916 yr the is only one method of adding a "drop shadow" and that is via images.... You could try the css borders but it isn't very good border:2px solid #333; that gives a solid 2px grey(ish) border but doesn;t look like a drop shadow
November 8, 200916 yr Author http://www.soulcellar.com/content/?page_id=231 the above site has a drop shadow? or is that not a drop shadow???
November 8, 200916 yr http://www.soulcellar.com/content/?page_id=231 the above site has a drop shadow? or is that not a drop shadow??? Do you mean when your mouse is on the image or text ? It shows a different colour behind it?
November 8, 200916 yr Author no i mean if you look at the out side of tghe actual site (it looks like its about 800 pixels wide) on my screen i can just see the edges/sides and it looks like it has a shadow?..
November 9, 200916 yr That's done with a repeating background image behind the content - you can see the image used here.
November 9, 200916 yr This has actually helped me too. Although you could get the same effect by centering the page with the background behind it (in the body) and using a border on the edges of the wrapper section that you want the effect on.
November 10, 200916 yr You would need to create the image yourself in Photoshop, take a 1px selection of it and tile it vertically behind your content. Alternatively there are complicated CSS methods of creating a drop shadow, you could find some tutorials by googling "CSS drop shadow"
November 14, 200916 yr Author also going back to the sort of shadow or border around my site...how would i create just a straight 1 pixel boarder around my site to frame it, could this be with the bit of css code at the top of this thread? Cheers
November 17, 200916 yr #wrapper{ border:1px solid #000000; } Would create a 1px black border around an element with an ID wrapper.
Create an account or sign in to comment