I have a circuit block like a diagram as a background image.
And I am in the need to place separate images over the respective places.
Current Result:
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.coil, .evaporator, .compressor {
display: flex;
align-items: center;
justify-content: center;
}
.evaporator {
width: 80px;
height: 80px;
margin-top: 70px;
margin-left: 90px;
}
.coil {
width: 150px;
height: 150px;
}
.compressor {
width: 80px;
height: 80px;
margin-bottom: 40px;
}
<div class="container">
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Expected Result:
The expected result would be like,
The code that tried,
.coil {
position: absolute;
left: 25%;
top: 55%;
}
But it doesn't give the exact expected result. Using of position:absolute doesn't give responsive design.
Could you please help me in achieving the result in dynamic way like using grid or flexbox in CSS? Thanks in advance.
Try this:
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
}
.coil {
position: absolute;
top: 204px;
left: 180px;
zoom: 101%; }
.evaporator {
position: absolute;
top: 26px;
left: 320px;
zoom: 121%;
}
.compressor {
position: absolute;
top: 220px;
left: 422px;
zoom: 100%;
}
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>;
As an option. But, keep in mind, this is a construction with hard-coded coordinates. When you change the size of the container with the background image, you will also need to change the positions of the nested elements.
<style>
.container {
background-image: url("https://i.stack.imgur.com/AfygH.png");
width: 500px;
height: 500px;
background-position: center;
background-size: cover;
border: 2px solid crimson;
margin: auto;
position: relative;
}
.container div {
border: 2px solid orange;
position: absolute;
}
.coil {
top: 256px;
left: 36px;
}
.evaporator {
top: 40px;
left: 296px;
}
.compressor {
top: 272px;
left: 333px;
}
</style>
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Maybe so?
<style>
.container {
background-image: url("https://i.stack.imgur.com/AfygH.png");
width: 500px;
height: 500px;
background-position: center;
background-size: cover;
border: 2px solid crimson;
margin: auto;
display: flex;
align-items: center;
/* position: relative; */
}
.container div {
border: 2px solid orange;
/* position: absolute; */
}
.coil {
margin-top: 111px;
margin-left: 33px;
}
.evaporator {
margin-top: -343px;
margin-left: 140px;
}
.compressor {
margin-top: 170px;
margin-left: -49px;
}
</style>
<div class="container">
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Here is the solution on flexbox instead of making it position:absolute as requested.
.container {
background-image: url('https://i.stack.imgur.com/AfygH.png');
height: 400px;
background-position: center;
background-size: contain;
width: 700px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.coil, .evaporator, .compressor {
display: flex;
align-items: center;
justify-content: center;
}
.evaporator {
width: 80px;
height: 80px;
margin-top: 23px;
margin-left: 140px
}
.coil {
width: 150px;
height: 150px;
margin-top: 60px;
margin-right: 231px;
}
.compressor {
width: 80px;
height: 80px;
margin-bottom: 88px;
margin-left: 218px;
margin-top: -90px;
}
<div class="container">
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
Because it's bitmap image, I would suggest to go back to the real size of each element, and to position them regarding their real size. All that in pixels. If really needs resizing outer container, more or less same can be done taking percentage of each element regarding the big one and their position left top same kind of calculation...
.container {}
.circuit {
position: relative;
width: 100%;
height: 100%;
}
.circuit>img {
/* 688 x 401 */
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 688px;
height: 401px;
}
.coil {
/* 120 x 90 */
position: absolute;
z-index: 1;
width: 120px;
height: 90px;
left: 150px;
top: 199px;
}
.evaporator {
/* 80 x 70 */
position: absolute;
z-index: 1;
left: 375px;
top: 25px;
width: 80px;
height: 70px;
}
.compressor {
/* 90 x 120 */
position: absolute;
z-index: 1;
left: 405px;
top: 213px;
width: 90px;
height: 120px;
}
<div class="container">
<div class="circuit">
<img src="https://i.stack.imgur.com/AfygH.png" alt="circuit" />
<div class="evaporator">
<img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
</div>
<div class="coil">
<img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
</div>
<div class="compressor">
<img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
</div>
</div>
</div>
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}
<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>
nested divs cannot be placed independently. Have two separate elements. consider the following.
announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
This is some announcement
</div>
<div class="header">
<img src="img/logo.png">
</div>
I have added the code as per your reference image. You can adjust the announce and header height optionally.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}
<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>
You have to give the margin to .header img
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
I have recently updated to Google Chrome Version 72.0.3626.109 (Official Build) (64-bit) in my mac and things are breaking now.
The reason behind having bit complex nested markup is because I need to show the image placed in centre of the div respective of image being different size but proportionally resized inside square div. So, all this was working fine before updating to new google chrome.
.g-parent {
width: 150px;
}
.parent {
position: relative;
padding-bottom: 100%;
background-color: gray;
}
.child {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
padding-bottom: 100%;
}
.my-img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: contain;
object-fit: contain;
}
<div>
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
<h4>Show above image inside below div</h4>
<div class="g-parent">
<div class="parent">
<div class="child">
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
</div>
</div>
Not really sure why it was working as height:100% should fail in this case since there is no height set in the parent container. So the actual behavior seems to be the correct one.
You can make the image to be position:absolute to fix this:
.g-parent {
width: 150px;
}
.parent {
position: relative;
padding-bottom: 100%;
background-color: gray;
}
.child {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
padding-bottom: 100%;
}
.child > img {
position:absolute;
}
.my-img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: contain;
object-fit: contain;
}
<div>
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
<h4>Show above image inside below div</h4>
<div class="g-parent">
<div class="parent">
<div class="child">
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
</div>
</div>
You can also simplify this using one div:
.g-parent {
width: 150px;
}
.parent {
position: relative;
padding-bottom: 100%;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
background-color: gray;
}
.my-img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: contain;
object-fit: contain;
}
<div>
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
<h4>Show above image inside below div</h4>
<div class="g-parent">
<div class="parent" style="background-image:url(https://dummyimage.com/400x200/000/fff)">
</div>
</div>
.g-parent {
width: 150px;
}
.parent {
position: relative;
padding-bottom: 100%;
background-color: gray;
}
.child {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
padding-bottom: 100%;
}
.my-img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: contain;
object-fit: contain;
}
<div>
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
<h4>Show above image inside below div</h4>
<div class="g-parent">
<div class="parent">
<div class="child">
<img class="my-img" src="https://dummyimage.com/400x200/000/fff" />
</div>
</div>
</div>
My code is as shown below:
xyz.html
<div class='main-container'>
<div class="q-background">
</div>
<div class="q-text">
<div>Order History</div>
</div>
<div class ="q-orders">
</div>
</div>
xyz.scss
.main-container {
height: 100vh;
width: 100vw;
margin-top: -4rem;
.q-background {
float: left;
width: 100%;
height: 14.3vw;
background: url("../../image/i-header-list.jpg") no-repeat;
background-size: contain;
}
.q-text {
position: relative;
margin-top: 1rem;
font-size: 2rem;
text-align: center;
}
.q-orders {
position: relative;
margin-left: 2rem;
float: left;
height: 50%;
width: 50%;
background-color: #ff3;
}
}
now what happens here is margin-top:1rem does not work for q-text even after defining position:relative. So is there anything missing?
The margin-top is working on .q-text, but you set on the parent a margin-top:-4rem. You should avoid a negative value on margin.
.main-container {
height: 100vh;
width: 100vw;
}
.main-container .q-background {
float: left;
width: 100%;
height: 14.3vw;
background: url("../../image/i-header-list.jpg") no-repeat;
background-size: contain;
}
.main-container .q-text {
position: relative;
margin-top: 1rem;
font-size: 2rem;
text-align: center;
top:0;
}
.main-container .q-orders {
position: relative;
margin-left: 2rem;
float: left;
height: 50%;
width: 50%;
background-color: #ff3;
}
<div class='main-container'>
<div class="q-background">
</div>
<div class="q-text">
<div>Order History</div>
</div>
<div class ="q-orders">
</div>
</div>
I have following HTML:
<div className={`page-header-profile-photo-container`}>
<div className="user-picture">
</div>
<div className="user-name">
<p>Sample GmbhH</p>
</div>
</div>
And my css:
.page-header-profile-photo-container{
position: absolute;
top: 10%;
right: 130px;
width: 200px;
}
.user-picture {
position: relative;
top: 10%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
}
.user-name{
position: absolute;
top: 5%;
}
This renders like following:
I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.
How can I fix this?
First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class
.page-header-profile-photo-container{
width: 200px;
position: absolute;
top: 10%;
right: 130px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
display: inline-block;
vertical-align: middle;
}
.user-name{
display: inline-block;
vertical-align: middle;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)
Using flex-box it will work good for me. Hope this help.
.page-header-profile-photo-container{
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
height: 50px;
top: 10%;
right: 130px;
padding: 5px 10px;
width: 200px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
/*background-color: #787567;*/
}
.user-picture img{
border-radius: 50%;
display: block;
height: auto;
max-width: 100%;
}
.user-name{
font-size: 15px;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
<img src="http://placehold.it/40x40" alt="Profile Picture" />
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>