bbin电竞比赛数据官方
Explore the potential of a powerful image on bbin电竞 . Learn how to add, style, replace and position images on every site page. See how you can organize your images and adjust their attributes to create exceptional web experiences.
Explore the potential of a powerful image on bbin电竞 . Learn how to add, style, replace and position images on every site page. See how you can organize your images and adjust their attributes to create exceptional web experiences.
Let’s explore how to edit the style, position and behavior of images on bbin电竞 .
From the Add panel , under Media you’ll find a wide collection of curated images. You can also upload your own media from the cloud, your social channels, or directly from your computer.
All of your site files can be viewed in the Media Manager . You can create folders, filter and reorder your media to keep things organized.
You can also create Boards to better manage a specific project or brand—and group files together so they’re easy to find.
To edit a media file, click on it and use the actions panel on the right. Here, you can make changes to your image and add tags. Let’s adjust some settings.
From this Photo Studio , you can enhance your image, cut out the background, add overlays and more. Note that you’re altering the source of the image, so these changes are reflected across all breakpoints.
Now add your image to the page, drag into place and use the handles to resize—or for more accuracy, use the Inspector Panel on the right, and set the exact size and position.
From the floating action bar, under Settings , you can add a link to your image, choose the scroll behavior and add alt text. You can also access the Photo Studio from here by clicking Adjust .
To replace an image, use the floating action bar—click Change Image , then swap and update.
Under Design , you can edit the color, border, corners and shadow effect of your image. These style changes can be made at each breakpoint.
Use the Focal Point tool to define the focus of an image as the screen size changes. Let’s see what it looks like on mobile.
You can also crop images to make sure certain parts are highlighted at each viewport. Click the Stretch icon to expand the image to fill the entire grid cell. Cascading rules apply here, so these changes are not reflected on bigger breakpoints.
To add an animation, click this icon and choose the one you want.
Down here, this image is a child of the section with no grid dividing the space, so you can use the Stretch icon to turn it into a background.
And choose the Parallax effect as the scroll behavior.
As with all style changes, you can select a different scroll behavior for every screen.
bbin电竞 is an advanced creation platform. To master it, continue watching this series of video tutorials.
NEXT VIDEOS

Workspace
Learn how to size and dock elements and work with advanced flexbox and CSS grid.

Workspace
Learn how to size and dock elements and work with advanced flexbox and CSS grid.

Workspace
Learn how to size and dock elements and work with advanced flexbox and CSS grid.

Workspace
Learn how to size and dock elements and work with advanced flexbox and CSS grid.
Did you find this resource helpful?
Thank you for your feedback!
Related learning resources.

LESSONS & EXERCISES
Single Images
Discover how to customize the size, position and behavior of images per breakpoint.

VIDEO LIBRARY
Video & Decorative
Explore how to add and edit Transparent Videos, VideoBox and Vector Art.

VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶

LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶

Ready to start creating?

Top searches
People are searching for
VIDEO LIBRARY
Introducing bbin电竞
Discover the bbin电竞 workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on bbin电竞 . Get a step by step walkthrough covering the key features and capabilities.
LESSONS & EXERCISES
Hover Interactions
Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.