I'm trying to format three images that originally have very different sizes. The idea is that each image is below another and they form a vertical block, in addition, that they have a background color (#5a6f99), which extends throughout the page. However, I am in doubt as to how I can achieve it in CSS (the HTML file should not be modified). What I show in CSS generates a background color on each content but it doesn't span the entire page and doesn't have the color continuously. Also, I want all three images to start below and to the left of my background image that I placed in the header CSS one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ultimate Frisbee</h1>
<nav>
<a href="index.html" class = "active">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
<main>
<aside class = "left">
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"></a>
</aside>
CSS:
* {
margin: 30px;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
header {
background-image: url("../images/flywheel.jpg");
background-repeat: no-repeat;
background-size: cover;
}
header h1 {
text-align: center;
font-size: 35px;
color: #faf0d4;
text-transform: uppercase;
}
header a {
text-decoration: none;
background: rgba(190, 194, 204, 0.6);
color: #1f2638;
font-size: 19px;
display: inline-block;
padding: 1rem 4.5rem;
margin: 25px;
border-radius: 25px;
}
aside a {
float:left;
background-color: #5a6f99;
}
.left img {
width: 200px;
height: 150px;
object-fit: cover;
display: flex;
margin-bottom: 35px;
border: 5px #191c1a solid;
border-radius: 25px;
}
.right h2 {
font-size: 35px;
}
.right p {
font-size: 20px;
}
.right table {
font-size: 20px;
}
Good day,
To put the background color of the whole page you can use
background-color
inbody
To make your images left-aligned in a column fashion you can use
float: left
enaside
. In your CSS you are using it inaside a
, that is, you are indicating that the elementsa
insideaside
be aligned to the left, but nowhere in your CSS are you aligning theaside
to the left, you have to add this (And theaside a
)I leave you an example with the changes so you can check if it works as you want