.c{
display: flex;
padding-top: 18em;
.backgroundDiv{
background: url("/images/DSC8253.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center ;
height: 20em;
opacity: 0.6;
position: absolute;
width: 100%;
z-index: -1;
}
}
.bigText{
display: flex;
text-transform: uppercase;
font-size: 3em;
font-family: cursive;
font-weight: 600;
height: 8em;
top:2em;
}
<section class="c">
<div class="backgroundDiv"></div>
<div class="bigText">
<p>Pilki-HUILKI</p>
</div>
</section>
Here in css file you type like below ( just small change )
.c {
display: flex;
position: relative;
height: 100vh;
}
.backgroundDiv {
background: url('/images/DSC8253.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 20em;
opacity: 0.6;
position: absolute;
width: 100%;
z-index: -1;
}
.bigText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
text-transform: uppercase;
font-size: 3em;
font-family: cursive;
font-weight: 600;
}
I use position absolute to make the text over the background then i use transform to make it to the center
Related
I'm trying to make this in HTML/CSS
Image design in Figma of what I am trying to make
And currently It looks like this
Current way it looks
I am not sure why it is formatting like that and to clarify I haven't made the other 2 cards yet because I was trying to get the first 2 right.
Here is the HTMl code for it (don't mind the class names please)
<div class="v10_8">
<div class="v10_9"></div>
<div class="v10_15">
<div class="v10_14"><span class="v10_10">CAREY</span><span class="v10_11">1</span></div>
<span class="v10_12">On 56 Points</span>
</div>
</div>
<div class="v10_16">
<div class="v10_17"></div>
<div class="v10_18">
<div class="v10_19"><span class="v10_20">STANWAY</span><span class="v10_21">2</span></div>
<div class="v10_40"><span class="v10_22">On 40 Points</span><span class="v10_39">16 points behind Carey</span></div>
</div>
</div>
</div>
And here is the CSS code for it:
width: 262px;
height: 617px;
background: url("../images/v10_23.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 65px;
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v10_8 {
width: 262px;
height: 276px;
background: rgba(255,255,255,1);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
border-top-left-radius: 44px;
border-top-right-radius: 44px;
border-bottom-left-radius: 44px;
border-bottom-right-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
}
.v10_9 {
width: 267px;
height: 96px;
background: rgba(248,228,125,1);
opacity: 1;
position: absolute;
top: 180px;
left: 0px;
overflow: hidden;
}
.v10_15 {
width: 135px;
height: 210px;
background: url("../images/v10_15.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 44px;
opacity: 1;
position: absolute;
top: 29px;
left: 65px;
overflow: hidden;
}
.v10_14 {
width: 94px;
height: 138px;
background: url("../images/v10_14.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 17px;
opacity: 1;
position: absolute;
top: 0px;
left: 21px;
overflow: hidden;
}
.v10_10 {
width: 94px;
color: rgba(21,21,21,1);
position: relative;
top: 0px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 29px;
opacity: 1;
text-align: left;
}
.v10_11 {
width: 30px;
color: rgba(21,21,21,1);
position: absolute;
top: 52px;
left: 32px;
font-family: Folito;
font-weight: Bold;
font-size: 71px;
opacity: 1;
text-align: left;
}
.v10_12 {
width: 135px;
color: rgba(21,21,21,1);
position: absolute;
top: 183px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 22px;
opacity: 1;
text-align: left;
}
.v10_16 {
width: 262px;
height: 276px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 341px;
left: 1px;
border-top-left-radius: 44px;
border-top-right-radius: 44px;
border-bottom-left-radius: 44px;
border-bottom-right-radius: 44px;
box-shadow: -10.746728897094727px 9.849809646606445px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
}
.v10_17 {
width: 267px;
height: 96px;
background: rgba(119,221,119,1);
opacity: 1;
position: absolute;
top: 180px;
left: 0px;
overflow: hidden;
}
.v10_18 {
width: 167px;
height: 241px;
background: url("../images/v10_18.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 44px;
opacity: 1;
position: absolute;
top: 16px;
left: 50px;
overflow: hidden;
}
.v10_19 {
width: 135px;
height: 138px;
background: url("../images/v10_19.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 17px;
opacity: 1;
position: absolute;
top: 0px;
left: 16px;
overflow: hidden;
}
.v10_20 {
width: 135px;
color: rgba(21,21,21,1);
position: absolute;
top: 0px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 29px;
opacity: 1;
text-align: left;
}
.v10_21 {
width: 42px;
color: rgba(21,21,21,1);
position: absolute;
top: 52px;
left: 46px;
font-family: Folito;
font-weight: Bold;
font-size: 71px;
opacity: 1;
text-align: left;
}
.v10_40 {
width: 167px;
height: 57px;
background: url("../images/v10_40.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 11px;
opacity: 1;
position: absolute;
top: 183px;
left: 0px;
overflow: hidden;
}
.v10_22 {
width: 137px;
color: rgba(21,21,21,1);
position: absolute;
top: 0px;
left: 15px;
font-family: Folito;
font-weight: Medium;
font-size: 22px;
opacity: 1;
text-align: left;
}
.v10_39 {
width: 167px;
color: rgba(21,21,21,1);
position: absolute;
top: 38px;
left: 0px;
font-family: Folito;
font-weight: Medium;
font-size: 16px;
opacity: 1;
text-align: left;
}
I understand the design may look slightly hard to code but I will try.
I would appreciate it if someone can help me thanks.
Two problems here...
FIRST ONE: The first code of the css you provided is incomplete.
FIRST ONE:
As I looked through your code, I realised you interchanged the positioning of the elements. Use the absolute position on the parent element and relative on the contents of the parent element. If you are a bit confused about the second issue, kindly correct the first mistake and prompt me. I'll help you out.
For this design, you must have a box that contains three columns and have two contents in the left column and the contents in the other columns are in the center.
You can achieve this in minimum div this is example for your single card you can make further changes in it.
.box1_1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 262px;
height: 276px;
background: gray;
opacity: 1;
border-radius: 44px;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869);
overflow: hidden;
position: relative;
}
.box1_3 {
padding-top: 20%;
font-size: 25px;
font-weight: bold;
text-align: center;
background: red;
height: 100%;
width: 100%;
position: absolute;
top: 10;
}
.box1_2{
font-size: 25px;
font-weight: bold;
text-align: center;
background: yellow;
height: 35%;
width: 100%;
position: absolute;
bottom: 0%;
box-shadow: -10.746728897094727px 9.851167678833008px 60px rgba(0, 0, 0, 0.09000000357627869); /* Add the same box-shadow as the parent container */
}
<div class="box1_1">
<div class="box1_3">
<p>CAREY</p>
<p>1</p>
</div>
<div class="box1_2">
<p>On 56 Points</p>
</div>
</div>
The image goes out of a white border and I want it to be inside:
body {
margin: 0px;
}
div.container {
height: 100vh;
background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.whitebox {
position: relative;
left: -5%;
width: 75%;
height: 75%;
background-color: white;
border-radius: 3%;
}
div.titleclass {
position: relative;
height: 30vh;
overflow: hidden;
}
div.overlay {
position: absolute;
background-color: #bdb76b6b;
background-image: url("https://i.imgur.com/vah2G4d.jpeg");
background-blend-mode: screen;
background-size: cover;
opacity: 0.9;
transform: rotate(7deg) translate(-2.3%, -20%);
height: 50vh;
width: 105%;
}
div.title {
font-family: "Rockwell";
font-size: 3.5vw;
text-align: left;
color: #006400;
font-weight: 400;
font-style: normal;
position: relative;
top: 25px;
left: 20px;
}
<div class="container">
<div class="whitebox">
<div class="content">
<div class="titleclass">
<div class="overlay"></div>
<div class="title">MODULO ISCRIZIONE SOFTAIR</div>
</div>
</div>
</div>
</div>
<script src="Modulo_softair_rework.js"></script>
get rid of height:75% and use top to reposition
body {
margin: 0px;
}
div.container {
height: 100vh;
background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.whitebox {
position: relative;
left: -5%;
top:-25%;
width: 75%;
background-color: white;
border-radius: 3%;
}
div.titleclass {
position: relative;
height: 30vh;
overflow: hidden;
}
div.overlay {
position: absolute;
background-color: #bdb76b6b;
background-image: url("https://i.imgur.com/vah2G4d.jpeg");
background-blend-mode: screen;
background-size: cover;
opacity: 0.9;
transform: rotate(7deg) translate(-2.3%, -20%);
height: 50vh;
width: 105%;
}
div.title {
font-family: "Rockwell";
font-size: 3.5vw;
text-align: left;
color: #006400;
font-weight: 400;
font-style: normal;
position: relative;
top: 25px;
left: 20px;
}
<div class="container">
<div class="whitebox">
<div class="content">
<div class="titleclass">
<div class="overlay"></div>
<div class="title">MODULO ISCRIZIONE SOFTAIR</div>
</div>
</div>
</div>
</div>
<script src="Modulo_softair_rework.js"></script>
Add overflow:hidden to parent div which has the border radius.
body {
margin: 0px;
}
div.container {
height: 100vh;
background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.whitebox {
position: relative;
left: -5%;
width: 75%;
height: 75%;
background-color: white;
border-radius: 3%;
/*here is the change */
/*here is the change */
/*here is the change */
overflow: hidden;
}
div.titleclass {
position: relative;
height: 30vh;
overflow: hidden;
}
div.overlay {
position: absolute;
background-color: #bdb76b6b;
background-image: url("https://i.imgur.com/vah2G4d.jpeg");
background-blend-mode: screen;
background-size: cover;
opacity: 0.9;
transform: rotate(7deg) translate(-2.3%, -20%);
height: 50vh;
width: 105%;
}
div.title {
font-family: "Rockwell";
font-size: 3.5vw;
text-align: left;
color: #006400;
font-weight: 400;
font-style: normal;
position: relative;
top: 25px;
left: 20px;
}
<div class="container">
<div class="whitebox">
<div class="content">
<div class="titleclass">
<div class="overlay"></div>
<div class="title">MODULO ISCRIZIONE SOFTAIR</div>
</div>
</div>
</div>
</div>
<script src="Modulo_softair_rework.js"></script>
After ~2 hours of researching I couldn't find a solution for my problem, I am trying to inherit the center of the background since the "blurred-box" gets bigger depending on the computer resolution.
It looks like this(laptop resolution):
And I would like to make it show the center of the background image instead of the corner.
* {
margin: 0;
padding: 0;
}
html {
width: 100vw;
height: 100vh;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 100%;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
If someone posts a solution I would like to have a link for documentation with those informations(if that is okay), thanks.
You are almost good, remove the use of translate() which is creating the issue and center your element using margin:auto instead:
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
background-image: url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
margin:0;
height: 100vh;
font-family: Arial, Helvetica;
letter-spacing: 0.02em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.blurred-box {
position: fixed;
width: 550px;
height: 670px;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
background: inherit;
border-radius: 2px;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 1000px;
height: 1000px;
background: inherit;
position: absolute;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
.user-login-box {
position: relative;
margin-top: 50px;
text-align: center;
z-index: 1;
}
.user-login-box>* {
display: inline-block;
}
<div class="blurred-box">
<div class="user-login-box">
<h1>text here</h1>
</div>
</div>
I'm trying to make it where the percentage text and loading text stays in the middle of the loader when I resize. The width change works when I resize the window, but when I change the height it moves the text. I'm not sure why this is happening but if someone is able to help me under why this is happening that would be nice.
CSS:
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
.container {
display: none;
position: relative;
font-family: 'Do Hyeon', sans-serif;
font-size: 27px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
bottom: 50px;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a {
text-decoration: none;
}
a:hover {
color: #add8e6;
}
i#heart-icon {
height: 18px;
width: 18px;
background-image: url(https://cdn.cporigins.com/site/images/heart_icon.png);
background-repeat: no-repeat;
}
i#heart-icon:before {
content: "";
padding-right: 18px;
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
bottom: -32%;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loadingDiv {
position: relative;
top: -50px;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
#loaderTxt {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 297px;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: relative;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
top: 128px;
font-weight: bold;
text-align: center;
}
</style>
I basically have it where it appends the divs to the html tag in js.
$('html').append('<div id="loadingDiv"><div class="loader"></div><div id="loaderTxt">Initializing Origins</div><div id="loaderPercent">0%</div></div>');
In these type of design you got to put the container to flex and center all items ( make it relative too )... Now make all items inside it absolutely positioned ... Here all items will come to the center ( of that container )... Viola, You will never get a problem of putting out the elements based on px size ever again..
html {
height: 100%;
width: 100%;
}
body {
background: url("https://cdn.cporigins.com/site/images/bg.jpg");
margin: 0;
}
#loadingDiv {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8360c3;
background: -webkit-linear-gradient(to top, #2ebf91, #8360c3);
background: linear-gradient(to top, #2ebf91, #8360c3);
}
.loader {
font-size: 10px;
margin: 50px auto;
border: 16px solid #f3f3f3;
border-top: 16px solid #6294f9;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
background-repeat: no-repeat;
position: relative;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loaderTxt {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
bottom: 10vh;
font-weight: bold;
text-align: center;
}
#loaderPercent {
position: absolute;
color: white;
font-size: 32px;
font-family: 'Do Hyeon', sans-serif;
font-weight: bold;
text-align: center;
}
<div id="loadingDiv">
<div class="loader"></div>
<div id="loaderTxt">Initializing Origins</div>
<div id="loaderPercent">0%</div>
</div>
Try to end your css alignment line with !important
so if you want to align this html text
<p>THIS IS MY TEXT</p>
You can use css like this
p{text-align:center !important;}
I hope this answer helps.
I wanted to put a background image inside the div "pageIntro". I've tried setting the background color to transparent, checked the image file path numerous times (it is certainly correct as when I click it in my code using vsCode it pops the correct image).
Note: putting a background color works fine
screensnip of the div with NO background color. Background-image is set to '/img/home/flower-cup.jpg'.
screensnip of the div with GOLD background color. Background-image is still set to '/img/home/flower-cup.jpg'.
Here's the CSS of the div and all the elements inside it:
div.pageIntro {
position: relative;
background-image: url('/img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
Here's the HTML:
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div>
</div>
Thank you very much :)
UPDATE:
Here's what it looks like when putting the background-image on BOTH inner and outer div. Unfortunately, it only works on the inner.
Issue is with your Image Relative Path i just tried you code with an online image path its working fine.
div.pageIntro {
position: relative;
background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
.introDiv {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 002;
}
.introText {
font-weight: bold;
font-family: "eczar";
color: whitesmoke;
font-size: 50px;
z-index: 002;
}
.subIntroButton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:rgba(0, 0, 0, 0.1);
width: 150px;
border-style: solid;
border-radius: 5%;
border-color: whitesmoke;
border-width: 2px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: whitesmoke;
padding: 10px 10px;
}
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div>
</div>
Hi As I can see your relative path.
if the image forlder is in same path of your html
What i can see error in your HTML. Which is span is not properly closed with a and img tag.
<div class='pageIntro'>
<div class="introDiv">
<p class='introText'> You deserve it. </p>
<a href="menu.html" style="text-decoration : none">
<div class='subIntroButton'> check treats </div>
</a>
</div>
<span class="blinking" href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"/></span>
</div>
you can use .
div.pageIntro {
position: relative;
background-image: url('./img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
Or if its one above your path you can use ..
div.pageIntro {
position: relative;
background-image: url('../img/home/flower-cup.jpg') ;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
width: 100vw;
height: 100vh;
z-index: 001;
text-align: center;
}
I have created one JS fiddle