Okay, I need some help trying to get an image go fully accross the screen in html code, no matter what the screen resolution. Any ideas?

P.S. I'm trying to code a website, and want an image banner across the entire back. don't tell me to use something else because I have rules that I must follow like using html code, no choices.
http://bytes.com/topic/html-css/answers/98282-how-do-i-make-image-repeat-horizontally-across-screen

Would this work?
That would repeat it. So, in terms of your avatar, you would see it over and over again across the page. JPFowl, try: <img style="Width:100%" src="blah.png" /> I think that should work, though I haven't had much luck with Width:100% :/ Actually, that might only make the image be it's normal width, rather than the screen. You could also try setting it to Screen.Width and Screen.Height, but that requires javaScript, I think.
We can't use javascript and it wouldn't be an avatar, it would be an image of marble (imagine a marble counter across the top of the web page).
edit- I tried 100% and it only goes across part of the screen. Example, only as far as the top cemetech banner. Other values don't work either, they only strech the image.
Ah, the first part was specifically towards Souvik. And, just double checking, you know this will stretch and distort your marble image, right? I would go with Souvik's method: Repeat-x and Repeat-y. Also, make sure your image is made to be tile-able.
Would CSS be ok?
can someone re-explain the the whole reapeat thing?
<img src="whatever" width="100%" alt="description" /> is all you need.
I tried the 100% thing and it didn't work, all it did was control how streched the image appeared over the given space. It wouldn't control how much lateral space the image would occupy.
JPfowl wrote:
I tried the 100% thing and it didn't work, all it did was control how streched the image appeared over the given space. It wouldn't control how much lateral space the image would occupy.
What do you mean? With width="100%". the image will be proportionally scaled in both the vertical and horizontal direction to occupy exactly 100% of the browser screen width.
Maybe he wants the image to be stretched, not scaled.
Then set the height property to match that of the original image.
TheStorm wrote:
Then set the height property to match that of the original image.
Exactly this. In this case, you would find the original image's height in pixels, and do:

<img src="blah" width="100%" height="42" alt="description" />

Notice that the height is just a raw number, not 42px or 42%.
KermMartian wrote:
TheStorm wrote:
Then set the height property to match that of the original image.
Exactly this. In this case, you would find the original image's height in pixels, and do:

<img src="blah" width="100%" height="42" alt="description" />

Notice that the height is just a raw number, not 42px or 42%.

According to w3schools both "42" and "42px" are acceptable, yay HTML being fuzzy on standards.
Oh weird, I never knew that. I thought NNpx was solely the domain of CSS definitions.
"NNpx" is the same as "NN" in HTML: http://www.w3schools.com/tags/att_img_height.asp

JPfowl wrote:
I tried the 100% thing and it didn't work, all it did was control how streched the image appeared over the given space. It wouldn't control how much lateral space the image would occupy.


Are you trying to get the image to spread past the edge of a div or something?
That's a good question, and quite possible; I didn't think of that. What else is on the page with this image, JPfowl?
Perhaps that is what he's doing, adding an image inside of a div.


Because that's smaller and harder to read than I'd thought, here's the source for demo purposes.
Code:
<html>
   <head>
   </head>

   <body>
      <!-- normal image width -->
      <img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg">
      
      <!-- image width set to 100% -->
      <img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg" width="100%">
      
      <!-- div is 70% window with, image is 100% of div width -->
      <div style="width:70%">
         <img src="http://alexglanville.com/res/img/portfolio/scape/full/scape-04.jpg" width="100%">
      </div>
   </body>

</html>
Coda... Never seen that editor before, but that looks awesome.
Deep Thought wrote:
Coda... Never seen that editor before, but that looks awesome.
It is. Well worth the money so far Wink
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 3
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement