HTML - Reduce File Size Of Website Background
Hi guys,
I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large. If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of? Similar Tutorialswww.ssties.com/product.html I have fought with this all weekend and cannot find the offending piece of code. I want each of the product rows to be about 20 pixels high, just enough to fit the image graphic and text without additional blank space in the cell. For some reason I cannot seem to shrink these table cells beyond 45 points. Also, this site is a WIP, so I realize there will likely be other errors. But this is the one that has me stumped. Thanks Hi all, I have an HTML SELECT on my page, the default size with which it shows fields in the drop down is too large for my page. Do you know a way for me to make the text in the drop down fields smaller? Is there a good css I can use as the style? Thanks, Jehan Ok I'd really like to design a darker them with a lot of textures like this one: http://www.grafpedia.com/tutorials/c...o-pixel-layout But thats just a photoshop walk-thru. So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image? I'm worried about download times as I have my background image as a 1px image set on repeat. But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I? Basically I'm lost as to how to get my site to look like the design in the link. Here it is now: http://acidtripmediaproductions.com/lmi/index.html I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it Whats the easiest way to do that? Would I want to keep the side bar nav where its at if I do this? Hello everyone again, I have searched everywhere to get the info to make the website adapt to the resolution size. I can not understand how it works. Will someone please be able give me the info on how to make the website adapt to the resolution. Thanks for all of your help How do you make the website The same size on different resolution? Thanks for all of your help. My website will have a picture that is cut in 3 parts (see below for the chop up). now my question is. I want the sides to gradually disapear if the browser window becomes smaller, as the main part of the website is displayed on the middle part of the website Say that the total size of the image is 1300px. and the respectively from left to right. the picture is chopped up in 250px - 800px - 250px. now if the browser is wide enough it would just show the whole 1300px of the website. however if the browser is at most able to show 1000px of the website, the side would reduce corespondingly showing the website as 100px - 800px - 100px. and that offcourse that the picture on the left side doesn't look weird. I hope everything is still clear. it bassically means that of the 250px of the left picture, the picture would be cut up from left to right, rather than the default right to left. thus cutting 150px away from the left and not the right. leaving the colors in the picture below, continue on flowing like they should. How would I go about doing this? Hey guys im sure this question has been answered, but having tried a large majority of the answers none seem to work. I have been building websites using my laptop (15 inch screen) after upgrading to a 17 inch screen im getting problems with the web page. It now has a horizontal scroll bar which i find rather annoying as do many other people that visit my sites. This is what it looks like at the moment on larger screens what i need to find out is how to make it so the page fits within the parameters of the screen without a horizontal scroll bar. this is the code that i used to make on of my sites, if possible could some one tell me where to maybe edit the string of html to get it to fit all screens? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head> <body style="color: rgb(255, 255, 51); background-color: rgb(0, 0, 0);" alink="#ffff33" link="#ffff33" vlink="#ffff33"><div style="text-align: center;"><img style="width: 750px; height: 225px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/PCKBIGBANER-1.png"><br> <big><br> Home | Investigations | Gallery | Locations | The Team | Methods | Contact us<br> <br> </big> <table style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;"> <tbody> <tr> <td style="text-align: center;"> <div align="center"><font color="#000000" size="+1"> <marquee bgcolor="#FF0000" direction="left" loop="99999" width="75%"><strong>We are accepting private bookings. Please contact Tim Harris on 07533119768 or email Tim at tim.paranormalknights@yahoo.co.uk</strong></marquee> </font></div> </td> </tr> </tbody> </table> <big><br> </big> <table style="background-color: rgb(0, 0, 0); text-align: left; margin-left: auto; margin-right: auto; width: 1312px; height: 459px;"> <tbody> <tr> <td style="text-align: center; vertical-align: top;"> <div style="margin-left: 40px;">Hello and welcome to Paranormal Knights Cymru. The group was founded in 2008 with the soul intentions of finding answers that we the team have been searching for, for all our lives! We are a unique team that reside in the south Wales area and have many many years of paranormal investigating experience between us. The things that make us such a unique team of paranormal investigators is that we take things to a higher level, we go to such a high level that other teams are left stranded whilst we soar above and beyond the grave. We use techniques such as Clairvoyance, Clairaudiance, Clairsentience and also the scientific approach with electronical equipment such as EMF detectors, EVP recording devices, still camera's and also video camera's. We also use non electrical equipment such as dowsing rods, oujia boards, glass swirling and table tipping. All of these methods are tried and tested and proven to be the main source of communications with the paranormal phenomena. To get an understanding of what these techniques entail and how they work please check out the methods page. <br> <br> So with that said will you be able to put the fear of the unknown behind you and join us in our quest for answers?<br> <br> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span class="Apple-style-span" style="color: rgb(51, 0, 153);"></span></span></div> </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td style="text-align: justify; vertical-align: top;"><img style="width: 498px; height: 253px;" alt="" src="http://i488.photobucket.com/albums/rr248/kingofkingspoker/Margam_Castle.jpg"></td> <td></td> <td></td> </tr> </tbody> </table><div style="text-align: left;"><br> </div> <br> </div> </body> </html> My new website test pages are at: http://www.monkeygambling.com/new%20pages/index.shtml I have a small probelm with the menu on the left side. It is not vertically aligned. The reason why is that I have an empty table inserted above it. This table is quite important as it makes the search engine spider miss the left menu out and move to the central section. My question is, is there a way to make this table exisit with no size (e.g. height =0), or just be there without affecting anything else? thanks Does anyone happen to know if there is a way, other than resizing everything in a site manually, to display a website layout at half size but still functional? Basically what I want to do is display my design work on my site, but at only half size so that it 1) it fits within *my* design and 2) it is obvious that it is not the actual website. Taking screenshots is all well and good, but they really don't display the actual functionality of the website--CSS rollovers, etc. So I'd like to be able to pull up the actual code within either a div or an iframe. Is this something someone has already thought of and invented a solution? How to set width & height of background image ? Since generally we set background image for anything like table, div tag etc. but i need that the image size is very shot while assigning as background image so how can i manage this width & height ? Please tell me that how can i do it bcoz I am not able to resize it by css also. OR Whenever I put any image in background then it must show me full image not a croped image whether cell size is low or very high...Generally it crops image or sometimes it repeats image 2 or more times. Since i know i can stop the repeating image but I want to know to put the fully image in cell / table / div etc.. Regards.... I'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background http://img236.imageshack.us/img236/4...dexbackcu3.jpg and then add menus and text content. any tips? thanks! jdawest Hi everybody! I always try to avoid the use of IFRAMEs, but in this case I had to insert the weather forecast coming from another site. This "source" website has an api which allows one to choose the background of the IFRAME, so no problems with the actual background indeed... but on IE 7 I see an ugly white spot if I set the "height" of the IFRAME to something bigger than the actual height of the content. (see attachment) This does represent a problem, since the actual content is variable in size, and thus I wanted to allow for some padding. I googled for the solution, but the only thing I can find is "how to set the background to transparent" which is not what I need. I tryed it anyway, as seen in following code: HTML Code: <iframe scrolling="no" frameborder=0 style="width:200px;height:490px;background-color:#000000;color:#000000;" allowtransparency="true" src="http://www.ilmeteo.it/box/previsioni.php?citta=5155&type=mps1&width=200&ico=1&lang=ita&days=3&font=Arial&fontsize=12&bg=000000&fg=FFFFFF&bgtitle=FF0000&fgtitle=FFFFFF&bgtab=E8F000&fglink=1773C2"> </iframe> The real problem is that I have no control on that white area, not even by setting bgcolor=black or style="background: black;"... Any ideas would be greatly appreciated! When you create a select form with a default size or a size of 1, the options (once you expand the form out by clicking it) that are moused over will be highlighted. I want that same effect on a select form with a size of 30. I imagine the solution lies in some javascript onmouseover function, but I couldn't find anything. Help? Hi, I would like to know if I can make the background image (over which I will write the content of the page) to fit the space I'm using. For example, I don`t how to explain it , but I see sites with the navigation bar image or the content image to adapt its size according to the amount of text on them. And then it seems like they are infinite, again, it adapts to the isze of the page. But my background image stays the same size all the time and I can see the end of it. I know I didn`t explain it very well but I don`t know exactly what I need to do this so, if someone could help me, thanks a lot. I have the following question: I have a website with a background image and on that background image I have some text. When I scroll down I want my background to stay where it is and only the text should scroll down. What should I do to make this like that? I am currently designing a website and I have to allow the user to change the background to a colour of his/her liking. I have a javascript function which works fine, but the problem is when you navigate to a different page the background colour will change to the default colour. I need to somehow allow the user to change the background colour for the entire website from any given web page. Below is the function i am using. Thank you in advance for your assistance. <script type="text/javascript"> function bg_color(c){ var b = document.getElementsByTagName("div")[0]; var d = document.getElementsByTagName("body")[0]; b.style.background = c; d.style.background = c; } </script> i have used a combo box in a form in that form i have placed a text field just above the combo box.when the text box is focused the system displays some results regarding to that text field.now when that result is displayed it is displayed over the combo box. now the problem is that when the result is displayed the combo box is not hiding.its coming over the results and thereby hiding the results. can anyone help to reduce the heavy weight component(combo box) into a lower one...... i devlope one html page which is working fine in ff but not in ie6, because of height of 1px column is much larger than ff column.. so how can i reduce height of 1px column in ie6. Hello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{ background: url(Template4_06.jpg); } Hi, I'm wondering if there is a way to ensure that my website background will work with any resolution i.e. will the flowers stay flush with the bottom corner of the page? http://imageshack.us/photo/my-images/819/bg1ev.jpg/ |