Html Question posted in
Some basic documentation can be found here.

Html – Background refusing to show on flex-box

So recently I’ve been trying to get a background image in my small box on my website. But for the life of me I cannot get it to show a background image. Though, it WILL show a color. So I at least know it’s formatted at least somewhat right. Here is the box.

The Culprit

If I can get this guy to have a background image opposed to a color I’d be very greatful!

Here is my code

.posts{
    margin: auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    background-image: url(logo.png);
    background-size: 20%;
    font-family: Arial, Helvetica, sans-serif;
    width: 900px;
}

.row {
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
}

.post-shorts{
    flex-basis: 31%;
    border-radius: 13px;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    width: 240px;
    height: 300px;
    background-image: url(PlaceHolderImage.png);
    transition-duration: .5s;
}

.post-shorts:hover {
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.234);
    flex-basis: 40%;
    background-image: url(PlaceHolderImage2.png);
}

.post-col {
    padding-top: 5px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    
}
<section class="posts">
  <h1>POSTS</h1>
  <p>Paragraph</p>
  <div class="row">
    <div class="post-shorts">
      <div class="post-col">
        <h3>Shorts</h3>
        <p>Animated using Blender</p>
      </div>
    </div>
  </div>
</section>

Thank you!

I tried switching around the background’s position, its alignment, and it’s overflow/repeating. Nothing seemed to work for it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Alright guys, found what the issue is. I was using Visual Studio Code and for some reason the files were being accessed with instead of /

    Really a simple issue. After I switched to that they worked.


  2. 0

    You have to have a real background url when using the url(PlaceHolderImage2.png);

    example
    url(https://plus.unsplash.com/premium_photo-1673306778968-5aab577a7365?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YmFja2dyb3VuZCUyMGltYWdlfGVufDB8fDB8fHww);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search