|
HTML - Adding Textures To Background Images, Yet Still Keeping File Size Small?
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? Similar TutorialsHi 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? Hi, I am fairly new at website building and I'm just building a page for a friend but I can not seem to find a way to keep the frames from collapsing too small for the content. Here is what I have. Not sure how much of it is redundant or noobish. Code: <FRAMESET ROWS="95,75,300,80,*" BORDER="0" BORDERCOLOR="000000"> <FRAME NAME="Top" id="Top" scrolling="no" noresize="noresize" src="Pages/Logo.html"> <FRAME NAME="SelectionTop" id="SelectionTop" scrolling="no" noresize src="Pages/SelectionTop.html"> <FRAME NAME="Middle" id="Middle" scrolling="no" noresize src="Pages/Content.html"> <FRAME NAME="Bottom" id="Bottom" scrolling="no" noresize src="Pages/SelectionBottom.html"> <FRAME NAME="FILLER" id="Filler" scrolling="no" noresize> </FRAMESET> Here is the page for you to look at it Right now if you make the window short enough it starts to squish over it's self. I would rather have it scroll to to see the whole page but I'm not sure how to make it do that. If worst come to worse and I need to use a different way I can but I know little other than the basic HTML and I originally though framesets was the way to go with my limited knowledge. Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. How do I make images small but when yoiu click them you go to a fullsize version? I have a fullsize image that takes up too much space on my webpage. What code should I use to shrink it a certain percentage but when I click on it you go to a full size image? thanks Hi all, I have a HTML document, with two images one below the other e.g. <img id="Image1" src="web/images/en/1.jpg" alt="Image"/><br/><img id="Image1" src="web/images/en/1.jpg" alt="Image"/> To make my doc XHTML compliant, i am adding following doctype declaration in my doc: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> But because of the above declation, there is a minor gap observed between the images, if i remove the Doctype declaration, the space disappears. Can somebody help me on this, is there any workaround to resolve the same or what could be the probable reason for this behavior. Is there a way to center images of changing size, without using the <div align="center">? I have several images that I would like to center on a page with having to compute where the center is and then setting the margin to move it over. Thanks, Greg Hi, the images on my Tumblr blog (http://madeinzaire.tumblr.com/) have suddenly been reduced to a small size, although I didn't change the HTML codes. I tried re-editing the HTML manually several times, reinstalling the theme, refreshing the page countless times but the problem is still there. I even tried creating a new blog (http://testathome.tumblr.com/) with the same theme and posted one same photo as in my original blog: in the new blog, the photos have the correct width. But in my original blog, they don't. The strange thing is that in my blog (http://madeinzaire.tumblr.com/) the images look right on the preview, but when I save and close the "customize" box, they remain small on the blog. If I'm not mistaken the codes for the image size is: #content { float: left; width: 760px; border-right: 1px solid #ccc; padding-right: 0px; margin-bottom: 15px; padding-right: 20px; } {block:IfDetailsNextToPost} #content img {max-width: 660px;} {/block:IfDetailsNextToPost} {block:IfNotDetailsNextToPost} #content img {max-width: 760px;} {/block:IfNotDetailsNextToPost} Can someone please help me? (view entire code in attached file) 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 So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though. Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe Hi everyone. I am a pretty experienced html-er. I've been doing it for many years, so I'm very familiar with basics, etc. I've run into this problem before in the past, but it is haunting me again and driving me nuts. All my folders are fine with respect to the structure of my code. I am having trouble with SOME of my .jpg images showing both remotely and on my uploaded webpages. These troublesome images show up when I edit them, ie. in my editing software. However, when I put them in their respective image folders and write my html, they do not show up in the browser. I absolutely know my source code is fine. I absolutely know the .jpg file(s) are named correctly. But some of them just won't show up. I looked at the details on the properties for these pictures and the ones that will not appear have camera make/model embedded in the information. I've tried to remove the information, but it still isn't making a difference. I've tried to convert the images again into .jpg format, but it is also not making a difference. I'm currently running Windows 7, but had this problem with WinXP in the past as well. Have any of you had this problem? I'm so frustrated! The photos are of products from my manufacturer. However, like I said, they have no trouble displaying while in my editing software and in the actual image folders themselves. It's only when I call them into my html document that they disappear. Grr! 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. 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 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! Hey, I embedded a youtube video on my site and then I tweak the youtube embed video code and added in hidden=true and &autoplay=1&loop=1. I hid the video and made it autoplay and loop, and got background sound. Works great and works both on IE and Firefox. But I'm just wondering, is it against youtube's rules to hide their videos on your site. I feared that so I took the video off. My Headfirst book on page 404 says to add the background-image property to a paragraph so I add the code for that and a few other changes highlighted in bold in last paragraph but it doesn't show the image on the browser and the css validator does not show it as an error, also what I don't understand is why there are THREE classes with the same name [.guarantee] in this stylesheet? The url is: file:///C:/Headfirst/HFHTML_ch10/lounge/lounge.html body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 background-image: url (images/background.gif) ; } I'm editing a tumblr, with complete custom HTML, and I was wondering how I'd either add one fixed white rectangle going down the page vertically (the posts are centered on the page, but the page background is too distracting from the posts themselves). Or, how I would just add white borders around each individual post? This should explain the look I want (with different colors/ background/ etc) Hello all, I am helping a company develop a website right now. But, I am very new to it and would like some help. I went to w3schools but I am not getting enough info. I needed help on the problems that I stated in the title. Here is my code. I added a transparent code on the bottom, I tried to change the background by putting my renaming my picture and uploading it through godaddy. Since I have hosting and domain with godaddy, and I use companies computers I can't install a FTP client because of some restrictions. If you are confused with what I say, please ask me to clarify. If you can, can you send me your AIM, GTALK, MSN, ETC.... so we can diagnose this problem. <html> <body> <p> <Center> <h1>Welcome to _____________</h1> </Center> </p> <p> <Center> <h3>*******<h/3> </Center> </p> <center><p><h2> Contact Us: ..........<h/2></p> </Center> <p> <h3><b>Introducing The ***:</B><h/3> <center> <h4>*$125.00 A Month Gets You Basic Service Office Space <p>Assigned Phone Number with Option of Voice Mail or Call Forwarding</p> Personal Email Address <br>(Ex: YOURBUSINESSNAME@........)</br> <p>Access to our Conference Rooms</p> <p>Professional Address for Mail</p> <p>Wi-Fi with in our Office</p> <p>E-Fax</p> In Addition you will have Exposure to other Professionals in Real Estate Business. <h/4> <p>Extended Use of Reception Personnel</p> <p>Private Office</p> <p>Warehouse Space</p> <p>Accounting and more!</P> $250 Initial Setup Fee Will Be Required <p>*Contact us for more information on optional services</p> </Center> <p> <h3>Along with the next step program, we offer services such as:<h/3> </p> <p> <ul> <li>Tenancy</li> <li>Property Management</li> <li>Rehabilitation</li> <li>Remodeling</li> <li>Road to Ownership</li> </ul> </p> <p> <Center> Below are videos that explain more about our mission to provide services to the Chicagoland area. </Center> </p> <html> <head> <style type="text/css"> div.background { width: 500px; height: 250px; background: url(bcc.jpeg) repeat; border: 2px solid black; } div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; } </style> </head> <body><div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div> </body> </html> Hi All This is my first post so i hope I provide all the info you need, to be able to help. I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago. Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image. here is the code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Barcaldine Tourist Park</title>
</head>
<body>
<div align="center"> <center>
<table width="1000" border="0" cellpadding="0" height="100%">
<tr>
<td height="54" colspan="2">
<div align="center">
<h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine
Tourist Park</font></h1>
</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
<li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
<li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Special Offers
</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local
Attractions</span></a>
<ul class="sub">
<li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
<li><a href="#nogo55">Tree of Knowledge</a></li>
<li><a href="#nogo56">Artesian Country Tours</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td rowspan="2" width="99"> </td>
</tr>
<tr>
<td rowspan="5" width="895" bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99" height="23"> </td>
</tr>
</table>
</center></div>
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
</div>
</body>
</html>
|
|||||||