How do I position one image on top of another in HTML? I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues. I just want to position

How do I give text or an image a transparent background using CSS? Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate elements. When trying: p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; } <p> <span>Hello world</span> </p> It looks like child elements

CSS background-image Property Css allow set backgroung image / images.Use  background-images property for set background image in a web page. Images Allow types is PNG, JPG,GIF,JPEG,SVG,WEBP CSS background-image Property syntax  background-image: url("image path"); single background image set Example code <style> body  {            background-image: url("backgroundimage.gif");          } </style> Multiple background images set Example code <style> body {             background-image: url("backgroundimage1.png"), url("backgroundimage2.jpg");          } </style>