Basic image with HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<div class="menu-content-wrapper">
<h1>My picture</h1>
<img src="img/myImage.jpg" alt="park bench">
</div>
</body>
</html>
As you can see, the image is way too large. Please note, this image is not optimised but we’ll look at that later. The current screen looks like this. The picture goes way off the screen.
By adding a class to the <img> tag allow us then to style the image.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<div class="menu-content-wrapper">
<h1>My picture</h1>
<img class="image-bench" src="img/myImage.jpg" alt="park bench">
</div>
</body>
</html>
And adding this line to the style sheet style.css
.image-bench {
/* not specifying a height auto scales image */
width: 500px;
}
Using various new tags including hover to play with this. I’ve removed the image from the html file and am calling the image in the dov box from the css.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<div class="menu-content-wrapper">
<h1>My picture</h1>
<!--<img class="image-bench" src="img/myImage.jpg" alt="park bench">-->
<div class="image-bench">
</div>
</div>
</body>
</html>
style.css
body {
background-color: #422FFF;
}
.menu-content-wrapper {
/* 0 pixels top and bottom
auto left and right */
margin: 0 auto;
width: 900px;
}
/* style the nav tags */
nav {
width: 100%;
height: 50px;
background-color: #FFE02C;
}
/* style the unordered list */
ul {
/* move the unordered list to the
right 100 pixels */
margin-left: 100px;
}
/* style the list items in the unordered list */
ul li {
/* links are side by side */
display: inline-block;
/* removes none clickable gap between text */
float: left;
/* vertically centers the list in the nav box */
line-height: 50px;
/* no padding top and bottom
but 25 px padding left and right */
padding: 0 25px;
}
/* style the text inside the link inside the
list item, withing the unordered list */
ul li a{
font-size: 25px;
font-family: Tahoma;
color: #4F45B2;
/* removes the underline from links */
text-decoration: none;
/* makes area clickable above and below
text link area */
display: block;
}
ul li a:hover{
color: black;
}
.image-bench {
/* if no height specified auto scales image */
width: 200px;
height: 200px;
background-image: url(img/myImage.jpg);
/*background-size: 50%;*/
/* image always fits in the div box */
background-size:contain;
/*background-size: cover;*/
background-repeat: no-repeat;
/*background-position: center;*/
background-position: center right;
}
.image-bench:hover {
/* if no height specified auto scales image */
width:100px;
height: 100px;
}