The interactive examples didn't have width and height CSS properties, which make them invisible in other editor environment.

[JohannesMolla]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

What specific section or headline is this issue about?

Backgrounds and Borders

What information was incorrect, unhelpful, or incomplete?

CSS properties of image elements should be placed in the interactive code. I tried to copy the code on sublime but didn't see the image, until I figured out that it needs width and height to be displayed.

What did you expect to see?

Full CSS properties

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Everything on the MDN is fantastic, I enjoyed learning on MDN platform 💖

MDN metadata

Page report details

• Folder: en-us/learn/css/building_blocks/backgrounds_and_borders
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
• Last commit: mdn/content@acfe8c9
• Document last modified: 2023-07-07T07:19:19.000Z

[caugner]

This is a limitation of the interactive editor we use for CSS examples.

The "Background images" example has two <style> elements:

• The first one is hidden:
  

  css-examples/learn/backgrounds-borders/background-image.html

  Lines 7 to 23 in 2d33a1c

  	<style>
  	* {
  	box-sizing: border-box;
  	}
  	.wrapper {
  	display: flex;
  	}
  	.box {
  	width: 200px;
  	height: 100px;
  	padding: 0.5em;
  	border: 1px solid #ccc;
  	margin: 20px;
  	}
  	</style>

• The second is what the editor shows you:
  

  css-examples/learn/backgrounds-borders/background-image.html

  Lines 25 to 33 in 2d33a1c

  	<style class="editable">
  	.a {
  	background-image: url(balloons.jpg);
  	}
  	.b {
  	background-image: url(star.png);
  	}
  	</style>

It would make sense if the user could see the non-editable portion of the CSS.

[iprinceroyy]

Hey @caugner, I've done a brief overview of the mentioned HTML file and linked JS and CSS files. I am ready to work on this issue. Is there any specific design or do we need to do it ourselves? Could you give me more context?