Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Multiple Background Images

No description
by

Matthew Sweeney

on 23 November 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Multiple Background Images

Adding Multiple Backgrounds
Adding multiple backgrounds is easy. Just add the next image in the same way you would a background image, separated by a comma.
Multiple Background Images
Layered Images
The first background image listed will be the first layer, followed by the second, etc.
Background Properties
Sample Page
Multiple Background Images
Background images can add variety and help make your page stand out. For example, in this presentation, the flying origami birds are the background image.
Sometimes one background image isn't enough. Fortunately, CSS allows us to layer multiple background images.
div {
background: url(image1.png), url(image2.png), url(image3.png);
}
The last background image will be the bottom layer.
Here image1 will be on the top layer, while image3 will be the bottom layer.
div {
background: url(image1.png), url(image2.png), url(image3.png);
}
Be careful not to put opaque images on top or you won't see the the other layers.
All of the normal background image properties apply, they are just separated by commas.
background-image: url(image1.png), url(image2.jpg);
background-size: 25%, cover;
background-repeat: no-repeat, no-repeat;
background-position: 50% 75%, center;
For example:
Remember, transparencies are only supported with certain image formats.
Below is a basic example of layered background images.
Beware of trying to cram in too many overlapping images.
You can overlay as many background images as you want, but remember that backgrounds affect visibility of site content.
Full transcript