Hi,
I am in the process of creating my portfolio page. I have my name in an h3 element that is nested in the header element. Below my name is my nav bar. For some reason the background-color property is not increasing in size when I change the background-size value. I have tried changing the background-size value to auto, contain, cover and px quantities, no change. I also tried putting my header in a div with the same edits and still no change.
Is the background-size property limited to images only?
I have tried to use the float property and the vertical align property in my css code and inline of my html code. Code snippet added below.
Please advise, thanks in advance!
<!-- Doctype HTML5 -->
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Shem Jean-Bapt. Portfolio</title>
<meta name="Web Development Portfolio " content="Web develpment portfolio to display Shem Jean-Bapt.'s HTML, CSS and Javascript skills">
<link rel="icon" type="image/x-icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/325/woman-technologist-medium-skin-tone_1f469-1f3fd-200d-1f4bb.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="headerdiv">
<header>
<h2 id="namelefttop">My Name Here</h2>
<nav id="navbar"><!--My name to the left, centered will be 'Home | About | Gallery | Contact in some other font -->
<a href="/???/">Home</a> |
<a href="/???/">About</a> |
<a href="/???/">Gallery</a> |
<a href="/???/">Contact</a>
</nav>
</header>
</div>
------
header {
background-color:rgb(206, 199, 199);
text-align: right;
font-family: "Didot";
}
#headerdiv {
background-color:rgb(206, 199, 199);
background-size: auto;
}
#namelefttop {
position: absolute;
left: 5%;
top: -1.3%;
color: rgba(116, 94, 83, 0.886)
}