This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to find the best way to center one div over another which is using the 'top' and 'left' CSS components.
When resizing the browser window the circle should always be in the center of the box, however moves slightly off horizontally when scaling
Here is the code I am using;
https://codepen.io/EarlGrey8/pen/LYVOQrY
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 33%;
}
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
To center the circle on any screen. Try the following CSS.
.moduleImage {
left: 50%;
transform: translateX(-50%);
}
Change .moduleImage's position, transform property.
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: absolute; /* change */
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 50%;
transform: translateX(-50%); /* change */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
you can use calc css3 calc
see example:
body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: calc(50% - 125px); /* just this line changed */
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>
everything is same.
just in .moduleImage class i changed left property to left: calc(50% - 125px);
125px is half of element width.
update your code by
.moduleContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 50%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
height: 70%;
}
.moduleImage {
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
}
I hope this work
Related
This question already has answers here:
center div on screen no matter window size
(4 answers)
Closed 8 months ago.
I'm trying to make these boxes horizontally centered on the screen no matter what the area of the viewport is, but I just can't seem to do it. If anyone could help with this, I would appreciate it.
<div class = 'jobFields'>
<div class = 'field-1'></div>
<div class = 'field-2'></div>
<div class = 'field-3'></div>
<div class = 'field-4'></div>
<div class = 'field-5'></div>
<div class = 'field-6'></div>
<div class = 'field-7'></div>
<div class = 'field-8'></div>
<style>
.field-1 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-2 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-3 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-4 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-5 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-6 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-7 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-8 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
</style>
</div>
</div>
</body>
flex would do you just right
body, html {
height: 100%;
margin: 0;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
div {
background-color: black;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
trying to replicate this effect using css/scss , so far tried with scss by applying different width to the children object ,but nothing seem to be working
.box-container{
display: flex;
flex-wrap:wrap;
}
.box-container .box1{
width: 30%;
}
Three ways to do the rounded images:
1- an image with border-radius: 50%;
2- a container with border-radius: 50%; and an image as background
3- a container with border-radius: 50%; and an image inside
To add text just use options #2 or #3 with text inside the div.
body {
background: honeydew;
}
#stripe {
position: absolute;
bottom: 38%;
width: 100%;
color: #fff;
text-align: center;
cursor: default;
}
#pic {
width: 160px;
height: 160px;
border-radius: 50%;
border: 4px solid skyblue;
box-sizing: border-box;
vertical-align: top;
}
#imgcontainer {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-block;
border-radius: 50%;
border: 4px solid orange;
box-sizing: border-box;
}
#container {
width: 160px;
height: 160px;
position: relative;
vertical-align: bottom;
display: inline-block;
border-radius: 50%;
border: 4px solid crimson;
box-sizing: border-box;
overflow: hidden;
}
#pic2 {
position: absolute;
top: 0;
left: 0;
margin: auto;
height:100%;
width:100%;
}
<img id=pic src="http://i.imgur.com/YwbFAEg.jpg">
<div id=imgcontainer><p id=stripe>text</p></div>
<div id=container><img id=pic2 src="http://i.imgur.com/YwbFAEg.jpg"><p id=stripe>text</p></div>
I had no success distributing the circles on a container with zero space among them using display:flex or float:left, so I did place them one by one using position:absolute inside a position:relative container (not a handy solution and have several limitations but it does works in some scenarios).
ps: notice the fact I'm using padding-bottom instead of height to keep the circles' aspect ratio.
body {
width: 100%;
height: 100vh;
margin: 0;
background: honeydew;
}
#container {
width: 100%;
height: 100%;
min-height: 346px;
position: relative;
}
.imgcontainer {
background-image: url(http://i.imgur.com/YwbFAEg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
border: 4px solid orange;
box-sizing: border-box;
}
#a {
top: 0;
left: 0;
width: 30%;
padding-bottom: 30%;
}
#b {
top: 0;
left: 29%;
width: 16%;
padding-bottom: 16%;
}
#c {
top: 0;
left: 44.5%;
width: 23%;
padding-bottom: 23%;
}
#d {
top: 0;
left: 67%;
width: 33%;
padding-bottom: 33%;
}
#e {
top: 54%;
left: 0%;
width: 24%;
padding-bottom: 24%;
}
#f {
top: 32.5%;
left: 23%;
width: 33%;
padding-bottom: 33%;
}
#g {
top: 39.5%;
left: 55.5%;
width: 15.5%;
padding-bottom: 15.5%;
}
#h {
top: 57.9%;
left: 65.4%;
width: 23%;
padding-bottom: 23%;
}
<div id=container>
<div id=a class=imgcontainer></div>
<div id=b class=imgcontainer></div>
<div id=c class=imgcontainer></div>
<div id=d class=imgcontainer></div>
<div id=e class=imgcontainer></div>
<div id=f class=imgcontainer></div>
<div id=g class=imgcontainer></div>
<div id=h class=imgcontainer></div>
</div>