Answer the question
In order to leave comments, you need to log in
How to increase the size of a background image?
Please tell me how to increase the size of the background image by 20%.
It needs to be fully displayed. If I set fixed sizes or background-size: cover, then only a part is placed. If I understand correctly, then you need to increase the size of the container. But how to do it right? Image on the right side, text on the left. Should this be done in a shared container or in a separate one?
Link to the project is here .
The code:
.main-container {
margin-top: 100px;
background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
background-size: contain; /* Как увеличить изображение размер на 20%, чтобы оно отображалось целиком? */
background-repeat: no-repeat;
background-position: right center;
box-sizing: border-box;
}
Answer the question
In order to leave comments, you need to log in
https://codepen.io/alex-rogochiy/pen/gZXXdV
Use the img tag instead of the background, since this is essentially not a background but a separate element graph
1. Set the
image to 100% width and auto height so that it is automatically proportionally calculated
already choose the width yourself, in our case it is main_right
3. vertical-align: middle is used as a fix, it takes a long time to explain. But if you want to figure it out, then set the color background to main_right and you will see that without vertical-align, the image is 4 pixels less than the parent
<div class="main_right right-block">
<img src="https://startly.web3templates.com/demo/software/images/screen2.jpg" alt="">
</div>
.main-container {
display: flex;
justify-content: space-between;
margin-top: 100px;
box-sizing: border-box;
}
.main_left {
width: 40%;
}
.main_right {
width: 50%;
}
.main_right img {
width: 100%;
heiht: auto;
}
to increase space remove this:
body {
width: 100%;
padding-left: 50px
padding-right: 150px;
I understood this from your question)))
and it is better to place the image in a separate block, you can also use divs, you can set the size in css, and so on
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question