HTML - Bkg Image To Resize Proportionally To Window Challenge
Hi - I am fairly new to coding but really enjoying it
I am trying to create a background image effect as seen he http://www.prada.com/ and http://news.jam-factory.com/ - The background image fits to the window, without distorting the image, and bits are hidden when needed Here is my attempt: http://www.piersart.co.uk/random - but when the window is tall and thin, a black strip appears at the bottom. What am I doing wrong? I don't quite understand how to use overflow, if that is something I should be using. Do I have to use Javascript (to get window dimensions, or resize the image)? If so, how? Many thanks in advance Similar TutorialsHi, I have a background image in my website and I want it to look the same in all window resolutions. However, when I resize the browser's window and I make it smaller althuogh I can see all the contents in the page I only can see a part of my background image. My CSS is like this: Code: body.secondary { background-image:url('images/flowers.JPG'); background-repeat:no-repeat; background-position:right top; background-attachment: fixed; } And if you need it this is the page. Many thanks! Cheers! My High School FBLA chapter is participating in a web design competition. The task was to create an online store that would sell T-shirts. We are currently using "Mal's E-commerce" shopping cart tool. So, this is my problem. I have this form: <FORM METHOD="POST" ACTION="http://ww11.aitsafe.com/cf/add.cfm" target="_self" > <INPUT TYPE="HIDDEN" NAME="userid" VALUE="D745330" /> <SELECT NAME="product"> <OPTION VALUE="Red shirt w/ logo" />Red <OPTION VALUE="Green shirt w/ logo" />Green <OPTION VALUE="Blue shirt w/ logo" />Blue </SELECT> <INPUT TYPE="HIDDEN" NAME="price" VALUE="19.95" /> <input type="submit" name="post" class="submit" value="Submit" /> </FORM> This form will submit information to mal's e-commerce, which will then generate a shopping cart preview page. (If you are confused, just put this coding into a new webpage and preview it.) All of this works fine, but instead of opening this 'shopping cart preview page' in the active window, I would like for it to open in a pop up window, with a controlled height and width, etc. I am not a form expert, but this problem has really got me.. I have tried google searching, but I have yet to find any useful suggestions. Is it even possible? I challenge all web designers to find a solution to this problem. I appreciate everyones help in advance. I have read a bunch of stuff on this and checked the 14 pages, but I am getting confused. Will I be able to have my site open up full size according to the setting of the user computer by added a script to my site pages? TIA Hello, How do I make a window.open method to open an html file and make it NOT resizable. Below is the code I have: onclick="window.open('img_1440.html', '','width=600px,height=550px resizable=0');" This window is going to be a small popup window and we want to make it not resizable. Thanks, Ruchir Hello! I am pretty new to HTML, but I was asked to make a webpage for my girlfriend's small business. What I want to do is copy the style used on the main image of this website: http://www.stellamccartney.com/. What I am looking to do is take an image and have it resize whenever I resize the browser window. If you can tell, the image is actually zooming in and out in order to maintain its correct ratio. I am not interested in copying anything else from this website, only the way the main image works. Looking at the source code has me baffled; I believe they wrote this using javascript, but I can't tell. If anyone knows how to create a similar effect as this site I would greatly appreciate the help. Thank you! I am looking for an easy code that when applied will resize an image link. I am trying to get around code that swaps one image for another on mouseover. I just want one image that will be resized on mouseover. I know this won't work, but something like: onMouseOver= width="180" height="180" with the original swap image being: width="190" height="190" Thanks for the help and for not slamming me for my ignorance! Peace. I am having a problem with images that vary in size. I let the user upload images and then display it on a web page. The problem is that the images that the users submit are different sizes. Some look good while others look distorted. Any Ideas? Hi All, We have images which are displayed in panel series. We have images if all sizes and width, we have tried using width=100% which makes all the images to fit the width allotted, which makes the image BLUR if the image is very small. Is there a way by which we can have width=100% for only the oversize images and leave the others as it is. Regards, Nagesh Evening all, I'm looking for some simply coding to tell an image to resize to fit into a frame that is defined in the CSS layout. The image size needs to be reduced to 630x402, the original size is much greater. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/main_img.jpg' theImages[1] = 'images/main_img2.jpg' theImages[2] = 'images/main_img3.jpg' theImages[2] = 'images/main_img4.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> <div id="main_img"><SCRIPT LANGUAGE="JavaScript">showImage();</script></div> I need someway of implementing the size change into the coding somewhere. Thank you for any help in advance! Hi, I'm building a web site for someone. At the top of the page is the logo and some flowing lines going from left to right on screen. If you look he http://www.chrisvanochten.com/clients/voicecontrol/ and start resizing your browser window then you would see the content at the bottom moves along so that it is always in the center. The problem I have is that the image on the top will not do this. This is because it's a background image. I want the image to be positioned so that the logo is above the latest news section. I have tried using a normal image and aligning it to the center (scroll down on the page above for this) but the image is always anchored to the left of the screen if the image is larger than the browser window. Is there anyway to set the background image so that it is anchored in position and that it will run off both the left and right hand side of the screen (as opposed to just the right hand side)? 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 trying to post something on a site that is blocking almost all HTML tags. As far as I know, the only tags that aren't being blocked are P, BR, A, IMG, U, B and a few other basic ones. I'm trying to post an image tag, but the image is generated from a PHP script. The site will not let me use the IMG tag with .PHP at the end of the image name. The SRC also has to end in .GIF or .JPG and cannot contain the ? anywhere in the URL, which means I can't use http://www.mydomain.com/script.php?a=image.gif I can't use SPAN or DIV or anything to do with tables or forms. I can use the P tag, but I can't use the STYLE attribute so I can't assign a background image using style sheets. So my question is, does anyone else know any way using HTML that I can include a background image or any other way to modify the URL of the IMG SRC so it doesn't use the question mark? Or is there any other way besides the STYLE attribute or the SCRIPT tag to include style sheets? Hi...I'm a novice and trying to develop my website...having a challenge. Here's the issue, and hope that someone more advanced in this might have an idea for me: I've got an affiliate program, and want to give my affiliates some html code to add to their current website that will allow their customers to put their name and email into it which will opt them in to a newsletter that I've got. When they hit "submit" I not only want it to submit their info to my database (which I'm using through 1shoppingcart.com) I want it to open a webpage with the affiliate link to the sales page that I've got. Currently I've got the HTML for them to just sign up for a newsletter, but don't know how to adapt it to open a new window for the affiliates link at the same time. If you've got ANY ideas or want more info on what I'm working with, either post it, or you can contact me offline at jasonsimpson cox net or im me on aim at siweb63 or yahoo at givemeyourhome Thanks a ton!! Jason i am trying to change the layout of my ecwid stores product description currently it looks like this i want to move the description from its current position to above the sku # on the right. like this i have been able to show the change in the chrome developer tool but i can not figure out how to implement it so that the rule works correctly for every product page. the site is www.thriftybynature.weebly.com if you would like to take a look at the site live with the developer tool. im really hoping someone can help me with this i have been trying to implement this change for days with no success. ps. im using ecwids product browser within weeblys site. Hey everyone, I designed a site for a client of mine. He developed a weather radar program and he wants to sell the idea to various news organizations. The site that I'm designing is for WCBS 880 radio. Here is the test page - http://zoomradar.com/wcbs880 Anywho, this is the problem I'm having. I have two iframes on the page. One for the actual map and one for the weather forecast which we are using from the national weather service site (don't worry, we are allowed too). Here is the problem.... The forecast iframe is causing a bend/distortion in the radar map iframe about 3/4 of the way down. My client says you can't miss it and he has sent me pictures too because I can't see it myself. He says that he sees it on windows computers using the latest firefox. I'm wondering if any of you can verify this and maybe guide me towards a solution because I can't seem to figure one out. He says that the bend is in the shape of the iframe almost like it is hovering over the radar map but not really creating a mirror image??? Not sure if this makes sense to any of you. Hopefully you see what he's seeing. Any help would be greatly appreciated because I'm getting to the bottom of the barrel here. Thank you very much in advance - Dan Hi Everyone, I am at a loss to explain why some of my form submission markup works fine, yet slightly modified markup does not! The markup that works ok with my website is as follows: Code: <td valign="top" background="../images/nav/left_nav_top.gif" height="800" width="131"><img src="../images/nav/invisible_pixel.gif" width="131" height="1" border="0"> <img src="../images/home/left%20nave_graphic.gif" width="131" height="173"> <form name="searchform" action="store_searchresults.asp?strCategory=&strSubCategory=&strThirdCategory" method="post" onSubmit="MM_validateForm('strKeyword','','R');return document.MM_returnValue"> <IMG SRC="../images/nav/left_nav_search.gif" WIDTH=127 HEIGHT=12 ALT="" BORDER=0> <INPUT TYPE="HIDDEN" NAME="strAction" value="search"> <input style="background-color: #FFFFFF;" type="text" name="strKeyword" size="11"> <input type="image" border="0" name="imageField" src="../images/nav/top_search_gob.gif" width="24" height="22"></form></td> However the following markup on the same page does not work consistenty between different browser version. It works fine in IE but it does not work in Firefox. Firefox presents the message "Please enter a keyword" and refuses to submit the form. Code: <form name="searchform" action="store_searchresults.asp?strCategory=&strSubCategory=&strThirdCategory" method="post" onSubmit="MM_validateForm('strKeyword','','R');return document.MM_returnValue"> <input type="hidden" name="strAction" value="search"> <input type="hidden" name="strKeyword" value="LV4"> <input type="image" border="0" name="imageField" src="../images/marquee/LV4403B4.jpg" width="113" height="98"> </form> It is as though Firefox cannot see the "strKeyword" attribute. However IE has not problem with it. Any help with this will be greatly appreciated, as I am at a loss... Thanks for your time Regards David Hi guys. I was hoping somebody can help me with this problem. I have an image that I would click on and it would open in another window, in a larger size. The only way I can presently do this is by using the target="_blank" code but this opens a window with scrollbars and the address bar. I would like just the image. Also with this method I have to use 2 images, a small pic, and a larger version. Is there any way to use just one size image, and have it open in a new window in a bigger size? Please look at this page to see what I would like to do, i.e. clicking on an image and have a pop-up window open up with a larger version of that image. http://www.currys.co.uk/martprd/product/seo/733683 I would appreciate any help with this. Thank you. I recently created this website to highlight a trip to New Orleans. I did something similar for a trip last summer to Africa. As you can see, the pages are designed with small image icons, and you must click on the icons in order to see a popup of the full image. However, when viewing the page on monitors with lower resolutions, some of the images create a flickering effect and prevent the viewer from seeing the larger popup image. Does anyone have any recommendations? Ideally, I'd like to find a solution that doesn't require me to resize the images. After all, they're not that big. If someone can offer a particularly good solution I'd be willing to compensate you for your time, since I intend to create numerous more travel pages like these. Thanks! Hi, Want to open a window without addressbar and menubar with loading image for the button click. i want to c the loading gif right after opening the window. its very urgent anybody help me on this Thanks, Hi, I have been searching around but am unable to find what I'm after... I am currently using the following code to open a new window (the new window needs to be 800x600). It currently does what I want it too. But instead of clicking on the word 'enter' to open the new window, is it possible to make an image do this instead? So when the user reaches the site and clicks the image a new window will open up (but at 800x600, not just a new window). If so I would be grateful if somebody could direct me to the correct coding to use. CSS: #enter { /* border:red solid 1px; */ margin-top:-300px; margin-left:auto; margin-right:50px; height:600px; width:800px; HTML: <a href="index2.html" target=open1 onClick="myRef = window.open('','open1', 'left=50,top=0,width=800,height=600,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars =0,resizable=0,copyhistory=0');"> enter </a> Thanks Tom |