Proportion of container in the header

#1

https://codecademy.com/courses/web-ext/projects/html-css-prj_innovation-cloud

A proportion of container inside header is weird as below.

Screen Shot 2016-08-23 at 11.11.27 AM.png2424x1318 1.81 MB

I'd like to make my code looks like this.

Screen Shot 2016-08-23 at 10.42.08 AM.png2428x1284 946 KB

I tried 

  center : fixed;
  background-size: cover;

Just like I did on Broadway project, but the result was not what I intended.

Is it also something about Bootstrap? Do you recommend me to move on until I learn more?

Also, I'd appreciate if there is any way I can see CSS code with Firebug on Chrome.

Screen Shot 2016-08-23 at 10.33.04 AM.png2452x1542 1.42 MB

Here is my CSS. 

.container {
	margin: 0 auto;
	max-width: 940px; 
	padding: 0 0px; 
}


/* Header */
.header {
  height: 800px;
  text-align: center; 
  background :url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
}

.header .container {
	position: relative;
	top: 200px;
}

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0px;
	margin-bottom: 80px;
  color: white;
  text-transform: uppercase;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

Thanks in advance!

#2

Hey @netninja25253,

I'd like to make my code looks like this

There's very little difference between the two images you've posted. What specifically do you want to change?

In order to make your code match the objective best, you could start by decreasing the font-size for the main header, then increasing the letter-spacing for the subheader.

Also, center: fixed; doesn't exist. I think you're might want position: fixed;?

#3

Thanks! @zystvan

I adjusted font size and margin to fit background image.
center: fixed; -> I fetched this one from other person's question I guess..
Thank you for information!

My code looks little bit weird but the result is fine :slight_smile: 

.header {
  height: 1200px;
  text-align: center; 
  background :url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
  margin: -400px 0 0 0;
  background-size: cover;
}

.header .container {
	position: relative;
	top: 600px;
}

Screen Shot 2016-08-24 at 10.03.01 AM.png2416x1202 930 KB

#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.