[halmasonberg]

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

[Curtis Rutland]

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?

[modi123_1]

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

[halmasonberg]

Curtis 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.

[modi123_1]

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'.

[halmasonberg]

modi123_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?

[modi123_1]

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

[halmasonberg]

modi123_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

[modi123_1]

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/

[halmasonberg]

modi123_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

[modi123_1]

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.