Recently, I made some alterations to my HTML-code by introducing external objects in place of certain items such as navigation and footer. However, since making these changes, I have encountered an issue where background images cannot be loaded into the 'collage' section of my website.
In a simplified version of the HTML code, the main focus is on the container which acts as a wrapper for the entire content. The central element of the website consists of multiple images that are linked to respective websites. Upon hovering over these images, a brief description along with a title is displayed.
The .collage class is utilized for styling the overall frame of the element, while the id attribute is intended for adding background images (which was functional before).
Snippet of HTML Code:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Homepage</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG Projects</h2>
<p>
Computer-generated projects created using the open-source software 'Blender', along with tutorials for some of these projects.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
The initial part can be used for general purposes.
body: Setting the font-size at 100% for scaling all em elements with one value (optimized for mobile).
#container: Positioned in the center, darker than the overall background, with basic styling.
article .collage: Displayed as table to facilitate proper functioning of image hover-over effect (currently working correctly).
#cg: This specific part is causing issues. While I am able to modify the background-color using this tag, attempts to change the background image have been unsuccessful.
.text parts: Design elements for the hover-over functionality, utilizing opacity to keep them invisible until hovered upon.
CSS Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
https://i.sstatic.net/ZL7bS.jpg
To summarize, changing the background color works seamlessly and the hover-over feature operates perfectly. The only challenge lies in loading the background images. When directly embedding images in the HTML file, everything functions as expected.
If anyone can provide insights or spot the elusive 'Error 30', it would be greatly appreciated! :)