Complicated super responsive Loopstudios landing page

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  • 1. Background Images Not Showing on Localhost

  If your background images aren't displaying on localhost, here’s what to check:

  • File Path: Ensure the image path in your CSS is correct. For example, if your CSS is in a css folder and images are in an images folder at the same level, use url('../images/your-image.jpg').

  • Case Sensitivity: File names are case-sensitive. Double-check the exact case matches.

  • Browser Cache: Clear your browser’s cache or try loading the page in an incognito window.

  • Console Errors: Open your browser's developer tools (F12) and check for errors related to loading resources.

  • 2. Darken Left Corner of a Box

  To darken the left corner of a box over a background image, use a linear gradient:

  CSS

  .box {
      position: relative;
      width: 300px;
      height: 200px;
      background: url('your-image.jpg') center/cover;
  }
  
  .box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
  }
  

  Summary:

  • Image Path: Ensure it's correct and matches case sensitivity.
  • Darken Corner: Use a ::before pseudo-element with a linear gradient for the effect.

  Marked as helpful

  1
• 

  Radwan-Sghir•100

  @Radwan-SghirPosted 3 months ago

  the images aren't loading, try deploying on netlify it's much better than github pages

  1