Hello,
I’m trying figuring out how to size an image in a box.
i tried
{
background-image: url();
background-size: 100% 100%
}
and all other values, the image fit but is not showing the part of the image that I’d like to dispay as background, plus if I change the screen size the image chages its proportion.
how can I fix the problem?
Suggest use the cover property value so that the image fills the box. It will be scaled accordingly. If the part of the image you want to see is not visible, adjust the background-position property. For example,
background-size: cover;
back-ground-position: 50% 50%;
This will center the image in the box.
it worked!
thank you so much!
1 Like
You’re welcome! We trust you corrected our typo…
We could think in terms of an Xs and Os board. What are their positions relative to the whole? Let’s build that in HTML.
<tr><th></th><td></td><td></td><td></td></tr>
will constitute the rows.
Image Alignment Chart| Left | Middle | Right | ||
|---|---|---|---|---|
| Top | 0% 0% | 0% 50% | 0% 100% | |
| Middle | 50% 0% | 50% 50% | 50% 100% | |
| Bottom | 100% 0% | 100% 50% | 100% 100% |
The top row is,
<tr><td></td><th></th><th></th><th></th></tr>
We cannot style the table, here, but markdown has allowed us to illustrate the general structure. It gave us the bold lines to delineate the <tbody></tbody>. The heading is our required <caption></caption> element. As it goes, MD does a great job, even with the style constraints.