After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solutions, none seemed to work for me. Check out my website here: Here is a snippet of the HTML code I am working with:
<article>
<div class="post" style="background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg)">
<div class="product">
<h3>The Monarch</h3>
<p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
</article>
And here is a snippet of the CSS code I have tried to use:
.post {
background-size: cover;
background-attachment: fixed;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
background-position: center;
opacity: 0.3;
}