Problem with product landing page creation

HTML-CSS
1

Can someone tell me why my h2 text wont show up? I think its stuck behind the img but i tried everything to get it to go after the picture.

<html>
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Roboto+Serif&display=swap" rel="stylesheet">
	<div class="back-img">
			<img id="background" src="https://images.hdqwalls.com/download/boy-playing-guitar-outdoors-5k-0l-2560x1600.jpg">
	</div>
	<header id="header">
		<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Taylor_guitars_logo.png">
		<nav id="nav-bar">
				<a class="nav-link" href="#acoustic">Acoustic</a>
				<a class="nav-link" href="#electric">Electric</a>
				<a class="nav-link" href="#more-info">More Info</a>
		</nav>
	</header>
</head>
<body>
	<section id="acoustic">
		<h2 class="1series">100 Series Guitars</h2>
	</section>
</body>
</html>

html {
	font-family: 'Libre Baskerville', serif;
	image-rendering: high-quality;

}

#background {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow-x: hidden;
}

#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background-color: rgba(255, 255, 255, 0.15);
}

#header-img {
	position: absolute;
	margin-left: 80px;
	margin-top: 21px;
	width: 130px;
	filter: grayscale(100%) brightness(0%);
		
}

#nav-bar {
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	margin-right: 60px;
}

.nav-link {
	text-decoration: none;
	color: black;
	font-size: 20px;
	font-weight: 700;
	margin-top: 40px;
	margin-left: 50px;
}

.nav-link:hover {
	text-shadow: 2px 2px #613d2e;
}

.1series {
	font-size: 50px;
}
2

The first thing I notice this:

.1series {
	font-size: 50px;
}

From here:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B\26 W\3F”.

1 Like
3

i changed them so it doesnt start with a digit, but it still wont appear :frowning:

here’s what i put:

<h2 id="series-100">100 Series Guitars</h2>

#series-100 {
	font-size: 50px;
}
4

Hi

You was right and also @kevinSmith
this:

#background{
  z-index: -1;
}

should be work…

5

Also, why do you have content in your head? I think that’s just supposed to be metadata.

6

@kevinSmith
I didn’t know this about identifiers!
Thank you!

1 Like
7

ive managed to pop the h2 text over the image but now its ON the image instead of going under it continuously.

also @kevinSmith, thanks for correcting my mistake with the head content. ive changed it so it goes into body instead.

@miguelgiacobbe, z-index didnt work as well :frowning:

8

you applied it to #background
idid it and it works :thinking:

10

Sorry I’ve read wrong

1 Like
11

yes i applied it to #background. the h2 text appeared but now its on the image instead of under it

here’s my code as of now

12

no worries! i didnt clarify where i put it anyway

13

You have to delete:
position: absolute;
to #background

14

that makes my image have excess white space though… and the text still doesnt go where its supposed to when i deleted it

15

delete position: absolute;
to the h2 too

16

oh! that did it. the h2 text went down now. but now my image isnt fitting the entire screen. the position: absolute was what made it fit

17

one moment I’m tryng to fix it

18

sure. thank you so much for your help!! :smile:

1 Like
19

the problem is of your figure, that has default style

20

you can remove it or set it:

figure{
	margin:0;
	padding: 0;
}
21

removing the figure tag made the white space smaller but its still there. ive tried the 0 padding and margin as well but it doesnt work