HTML and CSS for Images https://www.w3schools.com/html/html_images.asp https://www.w3schools.com/css/css_rwd_images.asp Web Page – home.htm <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Home Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <header> <div class="headertext" ><h1>HOME PAGE</h1></div> <div class="headerimg" ><img src="pexels-photo-68435.jpeg" alt="Did my chute open" /></div> <div class="clearfloat"> </div> </header> <nav> <ul> <li class="active">Home</li> <li><a href="service.htm">Services</a></li> <li><a href="terms.htm">Terms</a></li> <li><a href="contact.htm">Contact Us</a></li> <li><a href="about.htm">About Us</a></li> </ul> </nav> <div id="content"> <aside> Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area </aside> <main> <p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p> <p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p> </main> <div class="clearfloat"> </div> </div> <footer> <p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p> </footer> </div> </body> </html> Stylesheet – style.css body { background-image:url('pexels-photo-68435.jpeg'); text-align: center; } .container { background-color: rgba(255,255,255,0.8); max-width: 1000px; min-width: 640px; margin: 0px auto 0px; } div { margin: 0px; padding-top: 1%; } header { min-height: 200px; border-top: 1px dotted gray; } header h1 { color:rgb(112,32,209); font-size:74px; margin: 5px 20px 5px 20px; } .headertext { float: left; max-width: 40%; } .headerimg { float:left; width:50%; } .headerimg img { style="width:100%; height:200px;" } nav { border-top: 1px dotted gray; border-bottom-style: solid; border-bottom-color: red; border-bottom-width: 1px; height: 50px; font-size: 20px; } nav ul { list-style-type: none; margin: 0; padding: 14px 0px; background-color: #333333; } nav ul li { display: inline; font-weight: bold; } nav ul li a { color: #ffffff; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:link { text-decoration: none; background-color: blue; } nav ul li a:visited { text-decoration: none; } nav ul li a:hover { color: blue; text-decoration: underline; background-color: yellow; } nav ul li a:active { background-color: orange; text-decoration: underline; } nav ul li.active { font-style: italic; color: gray; } #content, #content div { min-height:200px; } aside { float: left; width:23%; margin: 20px; } main { border-left: 1px dotted gray; float: right; width:70%; } footer { border-top: 1px dotted gray; background-color: #bfcbff; vertical-align:bottom; min-height: 100px; } table, th, td { border: 1px dotted gray; border-collapse: collapse; } .red { color: red; } .clearfloat { clear: both; min-height: 0px !important; height: 0px; } Page navigation ↑ HTML5 and CSS3 ← HTML5: Installing the WAMP Server HTML5CSS3: CSS Navigation →