While working on a rails project, I mastered all the rails elements easily. Surprisingly, I encountered an issue with CSS this time - something that is not usual for me as I usually face Ruby problems!
The problem arises when trying to move a div element further down the page that has a background image set. It seems like the div and the background image are linked in some way. Below is the code snippet:
HTML:
<div class="about_background">
<div class="container heading_block">
<h1 class="about_heading"><i class="fa fa-flask"></i> About Abby <i
class="fa fa-cutlery"></i></h1>
</div>
</div>
CSS:
.about_background {
background-image: url("bread.jpeg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
}
.heading_block {
background-color: rgba(200,100,175, 0.8);
border-radius: 35px;
}
.about_heading {
text-align: center;
font-size: 50px;
}
If anyone can spot what's missing or offer guidance, it would be greatly appreciated. I attempted to create a jsfiddle but couldn't achieve the desired outcome. You can find the code on Github under ravenusmc, food_blog. Thank you in advance for the assistance!