Images play a pivotal role in website design. Not only can they stand alone as individual elements, but they can also serve as backgrounds or integral components of other design elements. At times, aligning these images with your envisioned design can be challenging. The fundamental principles described below aim to explain and guide you in integrating them seamlessly into your layout.
Adding a background image
- Log in to your 10Web account
- Click on the website you want to modify
- Click on the edit icon on your website thumbnail or
Click on AI Builder > Edit Website - Click on the Section you need to edit
- Navigate to Style > Background type
- Click on Classic
- Click on the image field to add an image
- Adjust the settings as needed
You can choose to add a scrolling and mouse effect by enabling the toggle and adjusting the settings.
Background image options
The designated space for your image is a set box or a grid. Often, images don't align perfectly within this box or grid. However, there is a range of options to fine-tune how your image aligns or fits within this space.
Image size
Explore the range of sizes available, starting with thumbnail ending with full, and use the one that best suits your design.
Position
Larger images: The position setting determines which segment of the image is displayed allowing you to shift and decide which part of the image is seen through the window.
For smaller images: This setting dictates where the image will sit within the space. There are pre - set options you can choose from or choose custom. Opting for custom activates sliders, enabling precision adjustments to the image's x and y coordinates.
Attachment
Default: Ensures that the image moves along with the content as you scroll. In other words, the element scrolls with the rest of the page.
Scroll: Forces the image to stay fixed in the position relative to the viewport, but it does move with the rest of the content when the user scrolls.
Fix: Ensures the image remains in a fixed position on the screen regardless of scrolling.
Repeat
If an image is too small for the designated space, it will, by default, repeat to fill the entirety of the space. Choose from these options:
No-repeat: Ensures the image is displayed just once.
Repeat X: Stretches the image horizontally.
Repeat Y: Let the image extend vertically.
Display size
This feature determines how the image conforms to the space it is in.
Cover: Makes the image take up the whole space, cropping if oversized or enlarging if undersized.
Contain: Fits the full image inside the frame, maintaining its proportions, which can sometimes result in blank areas around the image.
Custom: Offers a slider to manually adjust the image's width, with the height adjusting proportionately.
Note:
For optimal results, we recommend that you select images tailored to your design's dimensions.