Home/ Questions/Q 7901283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T09:10:52+00:00

I am designing a background for my page which will include air bubbles. I

  • 0

I am designing a background for my page which will include air bubbles. I would like to put one bubble image into a lot of places on the screen. I use the following code in my HTML file:

<body>
<div class="bg">
       <img id="bubble" src="images/bubble.png" />
</div>

Is there a way to put this bubble image into several places?

If you can direct me to another post (I couldn’t find any) or give me a solution I will appreciate it. Thanks in advance.

Note: Using a single background file with bubbles already in place is not an option.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use a CSS style that defines a background-image for the bubble and apply the style to any page element you want to have a bubble. Also define styles to help position the elements.

    .bubble {
  background-image:url('images/bubble.png');
}

.top {
  position: absolute;
  top: 0;
}

.bottom {
  position: absolute;
  bottom: 0;
}

<body>
<div class="bubble top">
       
</div>
<div class="bubble bottom">

<div>
</body>

    There are several other background properties to help you get the affect you want; position, repeat, size, clip.

    • 0