Fix sequential elements image blending issue

[KumarAr0631F]

Fixes #416

Summary

This PR improves the visual clarity of images in Chapter 4 – Sequential Elements of the CircuitVerse documentation by adding a proper background behind the images. The update ensures better contrast and consistency with the overall documentation theme.

Changes Made

• Added background styling behind images in the Sequential Elements section
• Improved image visibility and readability
• Maintained consistency with existing documentation design

Why this change?

Previously, some images blended into the page background, making them harder to distinguish. Adding a background enhances user experience, especially for learners viewing the documentation on different screen sizes and themes.

Screenshots

Before:

After:

Checklist

• Issue linked correctly
• Changes tested locally
• No unrelated files modified

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (10)

• static/img/img_chapter4/4.11.png is excluded by !**/*.png
• static/img/img_chapter4/4.12.png is excluded by !**/*.png
• static/img/img_chapter4/4.18.png is excluded by !**/*.png
• static/img/img_chapter4/4.3.png is excluded by !**/*.png
• static/img/img_chapter4/4.4.png is excluded by !**/*.png
• static/img/img_chapter4/4.5.png is excluded by !**/*.png
• static/img/img_chapter4/4.6.png is excluded by !**/*.png
• static/img/img_chapter4/4.7.png is excluded by !**/*.png
• static/img/img_chapter4/4.8.png is excluded by !**/*.png
• static/img/img_chapter4/4.9.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[senutpal]

I see you replaced the transparent background images with white background versions. While this does fix the visibility issue, I think a CSS-based approach might work better here. The new images are 140-230% larger in file size, and we'd need to manually edit any future images too.

As the issue author suggested, we could use CSS instead. We can even apply it only in dark mode:

[data-theme='dark'] img[src*="chapter4/4."] {
  background-color: #ffffff;
  padding: 8px;
  display: inline-block;
  border-radius: 4px;
}

Note: I’m commenting as a community contributor, not a maintainer.
CC @Nihal4777

[Nihal4777]

I see you replaced the transparent background images with white background versions. While this does fix the visibility issue, I think a CSS-based approach might work better here. The new images are 140-230% larger in file size, and we'd need to manually edit any future images too.

As the issue author suggested, we could use CSS instead. We can even apply it only in dark mode:

[data-theme='dark'] img[src*="chapter4/4."] {
  background-color: #ffffff;
  padding: 8px;
  display: inline-block;
  border-radius: 4px;
}

Note: I’m commenting as a community contributor, not a maintainer. CC @Nihal4777

@KumarAr0631F What do you think about this?