What is the solution to this issue? My images are set to percentages, but setting a height percentage does not seem to have any effect.
The relevant HTML code snippet:
<div class="header">
<img src="pictures/header.png" width="30%">
</div>
CSS for the "header" div:
.header {
margin: auto;
width: 70%;
padding: 1%;
text-align: center;
font-family: Arial, Helvetica, sans-serif,"serif";
font-size: 130%;
color: #e5e5e5;
background-color: #232323;
HTML for the second image section:
<div class="main">
<h1> bla bla bla </h1>
<img class="right" src="bilder/wave.gif">
<p> bla bla bla </p>
</div>
CSS for both classes mentioned (.right and .main):
.right{
float: right;
width: 15%;
}
.main{
margin:auto;
width: 70%;
padding:1%;
align: center;
text-align:left;
font-family: Arial, Helvetica, sans-serif,"serif";
color: #2b2b2b;
font-size: 130%;
background-color:rgba(178, 92, 42, 0.5);
background-image: url("../pictures/scroll.jpg");
background-size: 100%;
padding-bottom:2%;
}