|
HTML - How To Make Image Repeat
Yeah, it's probably a real simple question but it's bugging the heck out of me.
I'm trying to design my first layout (hence why it looks so simple), but it's not working out. Here's the layout: http://www.lifeschronicles.net/index_test_brown.html I want the content boxes (pale brown) to run all down the page. How do I do that? Please help. Edit: Ok I have finally realised what I need to do. So simple! Haha. Can ignore/delete this thread if you want to. Sorry guys! Similar TutorialsHi all, I'm new here and was hoping I could get some help. I am trying to make an image repeat right next to a first image. Example: img1, img2, img2, img2, img2, img2, img2, img2, img2, ..... Here's a better example using the drupal logo. Say I needed to place this image at the top of my page: and needed this one to go on the right of the first image and repeat over and over (Horizontal only to the end of the page): Any help is greatly apreciated, thanks in advance hey everyone - im really not a scripter i only do designs, but i wanted to know if its possible to repeat an image that is not set as background like in a table? thanks alot! x Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html I have an image that serves as a text box. It includes a border (i.e., the border is part of the image, not HTML) and a background picture. The picture fades into a solid color at the bottom. This first image depicts the top, left, and right parts of the border. (Here is the plan I first envisioned.) I have created a second image, one pixel tall, of what the rest of the box would look like, after which it would end in a similar 1px-high image of the border color. So, as the background of a div, is there a way to display one image, then have another image repeat indefinitely, followed by a third image? Alternatively, is there a way to have the background be a simple repeated image, with another one on top of it? Then I could cap the bottom in a different div. The most likely solution I have come up with is the following. Why don't I crop off the border and do that with HTML? That way, I have only to display one image, and the rest of the background can be a solid color. I don't know how to do this either, but it seems the most plausible. Hello, I am making a squad list for my football team and i have created a table containing all the information; squad number, name , position etc. In the last column i want to have it so there is a blank field or a field with a ver small thumbnail in and when the cursor hovers over this an image appears, but only whilst the cursor is over that small part. hope this make sense Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth. Thanks! Help-my-HTML Hi. I am making a template for my site, and i really need my title image to display at the very top of the page, so the top of the image touches the bottom of the tool bar of the browser. This is currently what my page looks like www.skyhigh3d.com/testpage.html I would like the top of the black image to touch the top of the browser, so there is no background visable above the image. The image and navbar are in a table, so really i need to table to be at the very top. I know this is possible becuase i have seen many sites with the image at the very top, but no matter what i do it doesnt seem to work. Your help would be very much appreciated. Thanks -JC Instead of using width/height in pixels to make an image smaller, is it possible to make it 50% its size? Hi Guys i have this image and i wont to add a link to it so it will take the user back to the home page, Would some one be able to help me? im aware this is pre amateur for some... Heres the snippet..... HTML Code: <table width="850" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 110px">
<td style="background-image: url(/images/logo.png); background-position: left top;
background-repeat: no-repeat">
</td>
<td style="background-image: url(/images/ssl.png); background-position: right top;
background-repeat: no-repeat">
</td>
</tr>
</table>
I wont to add the link to the image "Logo.png" any suggestions or examples? Thanks for looking.. This isn't really a problem but just wanted to learn how to make an image expand or get bigger onmouseover. You can see what i mean by going to these website's. one is for a video and one is for a image. http://www.appstorehq.com/htmleditor...hone-63962/app Put your mouse over the screenshots. http://videocopilot.net/tutorials/ Put your mouse over the screenshots. Hiya, I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks Ive got this nice 900x600 transparent background for my website.. but its 1,2 MB large...... Im guessing its too large to load in an acceptable amount of time.. So, ive tried saving it for the web & devices.. and, well.. PNG 8bit sucks. It doesnt support transparancy? Anyone know what to do? What program to use? I want to keep the quality, dimension, and format (since PNG is the only one who supports transparent shizz right?) Cheers, thank you Hey. I'm relatively new to web design. I've made a gallery of photo's using this code: <INPUT type="image" src="image.ext" onClick="window.open('http://www.website/image.jpg,'mywindow','width=400, height=600')"> because I wanted all photo's to pop up in a new window, and with specified dimensions. This code works great, but I want to have the "rolleover" effect, where you can put the mouse over it and it changes the photo, such as with this code: <body> <a href="zstore.html" onmouseover='rollover.src="http://ollertonmusic.com/images/ministudio1.jpg"' onmouseout='rollover.src="http://ollertonmusic.com/images/ministripes.jpg"'> <img src="http://ollertonmusic.com/images/ministripes.jpg" name="rollover"> </a> I want to be able to have the image have the "rollover" effect when the curser touches the photo, AND open in a new window with specified dimensions. And I'm wondering where to add in the ALT tag. Thanks! Hi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me? sorry for being vague in my initial post. Here is the header php code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[TITLE]</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head> Here is the css code: .header{margin:20px 0;} .header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;} .header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;} .header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;} .header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;} .header #searchform{float:right; width:325px; height:40px; margin-top:6px;} .header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; -moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888; } Hey guys, Let me first introduce myself (even though I've been on this site since 2004). I am Matt. I have used this site in the past with confidence and have always gotten excellent answers and responses. Therefore I am back here as a first resort to seek a kind user that would help me with a problem I have. I have a web site design that I have been fumbling over for ages in order to make it into a working web site. The problem is that I've tried so many times to realise the designs I make, but I find that my ambitions fly way ahead of my skills. Even when I spend countless hours with WYSIWYG editors, I find that WYSI-Not-WYG. (especially when you'd like the code to be as neat as the design) I have attached an image of the design I have slaved over and I am looking for a kind soul that would magically turn it into a functional web page. Another problem is that I have a budget of nothing, yet I will mention you/your site anywhere I can as appreciation for your help. For those of you who want to tell me that I'm crazy and to do it myself, go ahead, I'll keep trying, but I thought that this would lighten the load considerably. :3 I look forward to the responses and if anyone wants to take up the challenge, THANK YOU. Also, I will PM the separate elements for the page on request. Thank you again in advance! There are a couple of issues that I know of regarding this design... IE and Firefox both render the page differently, for example, the header and footer needs to be transparent (alpha). In Firefox, it renders correctly, but IE5 renders the transparent areas as white, therefore the png may have to be exchanged for a flash object with transparent wmode. Another thing that both browsers have problems with is the DIV positioning, it seems as though there needs to be a code hack in order for IE and Firefox to place the DIVs in the center of the page (I gave up trying when I couldn't get the DIVs to stop placing themselves in ridiculous positions. The shadow you see on the stripes? I have no idea how to get them onto the page considering the transparency problems in IE, but I have seen many sites achieve it, I just don't know how. I will make a shadow upon request though according to what is needed. I am willing to help as much as you help Hello, I am not familiar with coding of any sort, so if someone could just paste the appropriate code for my needs, it would be a lifesaver! And then I could just edit to fit my context... I want a selection form using what you all refer to all "radio options". However, when someone clicks on an option, I want an image off to the side of the option to change. So each selection would have a different image to appear. Is there any type of general code anyone could paste that would do that and I could just edit the image location and options, etc? Thank you all for all your help and time! Hi people, I've search the net regarding this issue and from what I've gathered, images can only be transparent provided it's in the gif format. May I know is it possible to make png pictures transparent? I heard that's possible with IE 7, but I want a method that works with lowers versions of IE too. I'm trying to avoid CSS if possible, is there a code something like "style=transparent" that can be typed into the <img> tag? Thanks alright, i have an ad (which is in an iframe from the advertiser) on the right side of my site thats a little bigger (by 30px) than the rest of the content on that side. http://www.greendayauthority.com/ You'll see it on the rightside. You'll also see how because it's bigger, it forced that cell it's in to stretch, and pushes the other stuff to the side (you can see that by looking at the top banner, and how it's smaller than the content when they should be lined up). What i want to do is maybe place that ad in a div or something so that it'll hang over the right side of the table, instead of pushing the other things away from it. Can anyone help me out? Hello all, I'm a newb at html, just started some basic coding last week. I've made my first site, though as you can see, the images and text (even if it's a placeholder right now) aren't lined up, and I'm not sure how to tell it to do that. Anybody with more expertise understand my situation, and how to fix it? Thanks! http://elliottetzkorn.com Hey, I'm working on a site, and I've made a background that works for what I'm doing, but it repeats on the bottom. See, I can't use the no-repeat (or so I think) because the image is 3px wide. What do I do? |
|||||||