Maybe I should do a search first

  • Snow is on Fire
  • Beginner
  • Beginner
  • User avatar
  • Posts: 36
  • Loc: Auburn, AL

Post 3+ Months Ago

Alright, so there are tons of tutorials and arguments out there - well, maybe not tons, but at least enough for me to find - about fluid vs. fixed width.

The goal for everyone seems to be to design a website that looks exactly the way they meant for it to on any resolution, I even found a tutorial on how to use javascript to achieve that. That's all good and well, but none of these tutorials address images.

I want to put an image with my logo on my website. But I also want to make my website stretch to fit different resolutions, and my image needs to span the whole thing. Now how do you do that?

Thanks in advance for any answers. I would've searched the forums first, but its a hard question to make into a string of keywords and get accurate results. :hmm:

Edit: Should probably have clarified I'm only looking for people's opinions on this and how they achieve it, not an answer to a specific problem. At least, I don't have a problem because I haven't tried this yet.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

Make the image about twice the width of the highest resolution you want to support. You can then set that image as the background of your header <div>, and as the div is expanded, more of the image will be revealed.

HTML Code: [ Select ]
<div id="header"></div>


CSS Code: [ Select ]
div#header {
 background: url('path/to/image.png') top left;
}
  1. div#header {
  2.  background: url('path/to/image.png') top left;
  3. }


An alternative to making a really wide image would be to use an image that fades into a solid background color, or to use an image that neatly tiles horizontally, and then set the appropriate repeat flag in the CSS:

CSS Code: [ Select ]
div#header {
 background: url('path/to/image.png') top left repeat-x;
}
  1. div#header {
  2.  background: url('path/to/image.png') top left repeat-x;
  3. }


Two excellent resources for XHTML and CSS:
http://www.w3schools.com/xhtml/
http://www.w3schools.com/css/
  • Snow is on Fire
  • Beginner
  • Beginner
  • User avatar
  • Posts: 36
  • Loc: Auburn, AL

Post 3+ Months Ago

Thanks, spork. I'm gonna try that now XD
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

your other option is to create an image look that is intended to scale http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

as spork said, you could have the background image that fades in with the rest of the background, or you could use two images ... a header image and a background image that fits with the header image, much like ozzu does ... so you'll have the following ...
HTML
Code: [ Select ]
...
<div id='header'><img src='images/header-image.gif' /></div>
...
  1. ...
  2. <div id='header'><img src='images/header-image.gif' /></div>
  3. ...

CSS:
Code: [ Select ]
div#header
{
background-image:url('images/image-that-fits-well-in-with-the-header-image.gif');
text-align:left;
}
  1. div#header
  2. {
  3. background-image:url('images/image-that-fits-well-in-with-the-header-image.gif');
  4. text-align:left;
  5. }
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

graphixboy wrote:
your other option is to create an image look that is intended to scale

That's essentially what I was getting at when I mentioned using an image that tiles nicely horizontally. You just worded it better. :wink:
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

graphixboy wrote:
your other option is to create an image look that is intended to scale http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax


Very cool ! :D
That's not what I thought it was before looking at it at all.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

yeah I keep looking for a good place to use that technique... Haven't found it yet though.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

joebert wrote:
Very cool ! :D
That's not what I thought it was before looking at it at all.

Ooooh! I didn't even realize it did that until I went back and looked at it again after joebert's comment! That is pretty slick indeed.
  • Snow is on Fire
  • Beginner
  • Beginner
  • User avatar
  • Posts: 36
  • Loc: Auburn, AL

Post 3+ Months Ago

Thanks for the ideas ya'll. I'm itching to try this stuff now! Yeah, I said ya'll. Silly forum underlining my internet drawl. Tsk, tsk. :-P

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 53 guests
  • 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 post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.