10 Replies - 1455 Views - Last Post: 10 September 2011 - 09:21 AM

#1 halmasonberg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 11

How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:06 PM

I'm relatively new to this (always a scary thing to say). I was wondering how you make a photograph fill the screen as background and grow larger and smaller depending on browser window size. A perfect example is Julian Schnabel's web site: http://www.julianschnabel.com/

Thanks for any help you can throw my way.

Hal

This post has been edited by halmasonberg: 09 September 2011 - 07:07 PM

Is This A Good Question/Topic? 0
  • +

Replies To: How do you make a photo match browser-window size?

#2 Curtis Rutland  Icon User is offline

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4559
  • View blog
  • Posts: 7,980
  • Joined: 08-June 10

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:09 PM

I'm by no means an HTML/CSS/JS expert, so I don't know how myself, but the beautiful thing about web development is that you can download the source from any page, including the stylesheets and scripts, and view it yourself. Have you given that a try here?
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9497
  • View blog
  • Posts: 35,844
  • Joined: 12-June 08

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:10 PM

That guy is using some CSS and a background image..

Here's some stuff to try out.. I would advocate dinking around with using the body tag and when you feel up to it learn how to start out some CSS and how to set an image in the background of an div tag.

http://www.w3schools..._background.asp

http://www.w3schools..._background.asp
Was This Post Helpful? 0
  • +
  • -

#4 halmasonberg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 11

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:16 PM

View PostCurtis Rutland, on 09 September 2011 - 07:09 PM, said:

I'm by no means an HTML/CSS/JS expert, so I don't know how myself, but the beautiful thing about web development is that you can download the source from any page, including the stylesheets and scripts, and view it yourself. Have you given that a try here?


Haven't done this, no. How do you do that?

Thanks.
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9497
  • View blog
  • Posts: 35,844
  • Joined: 12-June 08

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:17 PM

What browser are you using?

Most browsers let you right click anywhere in the middle of a page and have an option for 'view source'.
Was This Post Helpful? 0
  • +
  • -

#6 halmasonberg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 11

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:27 PM

View Postmodi123_1, on 09 September 2011 - 07:17 PM, said:

What browser are you using?

Most browsers let you right click anywhere in the middle of a page and have an option for 'view source'.


I'm on Safari. I found View Source. Question I have is what part of this is for the photo? Obviously I don't want everything. Or should I grab everything and work backwards? :)
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9497
  • View blog
  • Posts: 35,844
  • Joined: 12-June 08

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:37 PM

Again, I would use the background tag (first link I posted) and see how that operates... then bump up to more fancy stuff.
Was This Post Helpful? 0
  • +
  • -

#8 halmasonberg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 11

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:52 PM

View Postmodi123_1, on 09 September 2011 - 07:37 PM, said:

Again, I would use the background tag (first link I posted) and see how that operates... then bump up to more fancy stuff.


Thanks for that. However, I don't want to make the image repeat. Really want to find a way to have it expand to fit the page if possible.

Hal
Was This Post Helpful? 0
  • +
  • -

#9 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9497
  • View blog
  • Posts: 35,844
  • Joined: 12-June 08

Re: How do you make a photo match browser-window size?

Posted 09 September 2011 - 07:58 PM

No kidd'n chief. I got that the first few posts.

Here's the code you need to look at from that guy's website. It's in his style.css. Go nuts.

	#home_container {
		
		
		
			height: 100%;
		    position: fixed;
		    width: 100%;
			background: #464646 url(images/bg_schnabel.jpg) no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			display: none;
	}


Predicting your next question, read this:

http://www.dreaminco...inner-tutorial/
Was This Post Helpful? 0
  • +
  • -

#10 halmasonberg  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-September 11

Re: How do you make a photo match browser-window size?

Posted 10 September 2011 - 08:46 AM

View Postmodi123_1, on 09 September 2011 - 07:58 PM, said:

No kidd'n chief. I got that the first few posts.

Here's the code you need to look at from that guy's website. It's in his style.css. Go nuts.

	#home_container {
		
		
		
			height: 100%;
		    position: fixed;
		    width: 100%;
			background: #464646 url(images/bg_schnabel.jpg) no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			display: none;
	}


Predicting your next question, read this:

http://www.dreaminco...inner-tutorial/


Thanks, this helps. And thanks for the CSS lesson. Definitely needed that. Now slowly trying to wrap my brain around it all :)
Was This Post Helpful? 0
  • +
  • -

#11 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9497
  • View blog
  • Posts: 35,844
  • Joined: 12-June 08

Re: How do you make a photo match browser-window size?

Posted 10 September 2011 - 09:21 AM

Yup.. it's always a joy... for me CSS sucked because I was used to more conventional languages like java and c#... then it's all about pretty decorations and tags.. ugh.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1