Hey i have a problem with my html page
I use recaptcha on my website but after recaptcha load i have a problem with backround
Before recaptcha :
After recaptcha :
I don t know why but after captcha load the background don t take all page
For my background i use
CSS
* {
margin: 0;
padding: 0;
}
#dark-bg {
width: 50%;
height: 100vh;
background: linear-gradient(90deg, rgba(51,0,102,1) 15%, rgba(67,26,156,1) 90%);
float: left;
}
#wave {
position: absolute;
content: "";
bottom: 0;
width: 50.06%;
height: 100vh;
transform: rotate(180deg);
background: url(https://i.imgur.com/Ds3Raj2.png);
background-size: contain;
background-repeat: no-repeat;
}
body {
background-image: linear-gradient(90deg, rgba(51,0,102,1) 54%, rgba(67,26,156,1) 90%) !important;
}
And html
<div id="dark-bg"></div>
<div id='wave'>
<p></p>
</div>
How i can resolve that?
Related
I have a picture which has certain dimensions, and i need to implementa div with a button inside the pic, as it is on this picture.
I tried this, this is my code.
.wrapper {
width: auto;
text-align: center;
}
.wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
width: 100%;
height: 100%;
z-index: 10;
}
.background-image {
display: none;
}
.responsive-image {
max-width: 100%;
height: 100%;
}
body {
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}
.button-position {
position: absolute;
bottom: 20%;
left: 15%;
z-index: 200;
}
.cta-button {
padding: 2rem 8rem;
background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
font-family: Barlow;
color: white;
font-size: 40px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.2em;
text-align: center;
}
<div class="wrapper">
<img class="img-fluid responsive-image position-relative" src="https://unsplash.com/random" />
<div class="button-position">
<a class="rounded-0 btn cta-button btn-lg btn-block cta-button" href="<?php echo $button['new_template_button_link'] ?>">
Button
</a>
</div>
</div>
This is what i've gotten so far:
But as you can see, its streched out, and it doesnt look as the figma file above
It looks like you're using a library to adjust the image. Remove the classes img-fluid and position-relative from your HTML.
For the purpose of setting a background image, I would create a seperate div and set the background image to your image.
#hero-div {
background-image: url('./image.jpg');
background-repeat: no-repeat;
background-position: center;
object-fit: cover;
}
Nest the button inside the image and position it there.
i want to add radial-gradient on an element, it works when i set an image as a background image but not on element. Is there any way to do this, what am trying to achieve here is fade the image from bottom.
*My Code*
<div class="slideBanner">
<img src="/media/{{show.banner}}" style="background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%); background-blend-mode: multiply; width: 500px; height: 500px; z-index: 1;">
</div>
I imagine that your answer is like this codepen-resolve
codepen-image
.slideBanner {
position: relative;
width: 100%;
height: 100%
}
.slideBanner:before {
position: absolute;
content:"";
background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%);
background-blend-mode: multiply; width: 500px; height: 500px;
z-index: 0;
opacity: 0.7;
width: 100%;
height: 100%
}
img {
width: 100%;
height: 100%
}
<div class="slideBanner">
<img src="https://1.bp.blogspot.com/-2hrW2w5l99U/XYuD2fDHydI/AAAAAAAAIKY/Wu_bQmABRL0-lm9LAt3tzs75uKT8S0nhwCKgBGAsYHg/s320/15694239854007711595824302455034.jpg" >
</div>
So i have been developing a loading screen website for a gaming community in a game called MVG and for some reason i have an issue with the site where after the first fade out of the image it flashes and it then does this for every image im unable to see what the problems is i would really like some help since otherwise the website is finished for me thanks in advance.
here is my first draft of the website https://mynamejack.hxane.com/MVGCWloadingscreen/
just click inspect elements and you should be able to view all the code but i will post it below anyway
<html>
<head>
<title>MVG loading screen</title>
<link href="assets/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="outer">
<div class="details">
<img alt="MVG" src="assets/images/logo/mvg-logo.png" style="opacity: 100%;">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 580px;
}
</style>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: arial;
overflow: hidden;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 60s ease-in-out infinite;
background-size: cover;
}
.outer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5)
}
.details {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#keyframes animate { /* When you want to change the image put the image name in replacethis.jpg and make sure its a jpg also make sure the % adds up to 100% otherwise it spazes out
If the slideshow brakes please let me know on discord MyNameJack#6969 or if you know css you can fix it */
0%, 100% {
background-image: url(images/slideshow/replacethis.jpg);
}
11% {
background-image: url(images/slideshow/replacethis.jpg);
}
22% {
background-image: url(images/slideshow/replacethis.jpg);
}
33% {
background-image: url(images/slideshow/replacethis.jpg);
}
44% {
background-image: url(images/slideshow/replacethis.jpg);
}
55% {
background-image: url(images/slideshow/replacethis.jpg);
}
66% {
background-image: url(images/slideshow/replacethis.jpg);
}
77% {
background-image: url(images/slideshow/replacethis.jpg);
}
88% {
background-image: url(images/slideshow/replacethis.jpg);
}
99% {
background-image: url(images/slideshow/replacethis.jpg);
}
100% {
background-image: url(images/slideshow/replacethis.jpg);
}
}
I found this Post CSS-only Acrylic Material from Fluent Design System which is great but it has a big problem.
When I try to use more then one background image it doesn´t work anymore, because the following piece of code is needed:
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
But I want to use different background-images for page sections:
body {
background: #FFF;
}
.hero {
background-image: url(img1.jpg);
}
.about {
background-image: url(img2.jpg);
}
I need to be able to use Acrylic material effect anywhere on the page, like this:
<body>
<div class="hero">
<h1>I´m a hero</h1>
Scroll down link
</div>
<div id=section class="about"><p>Section has different background image <span class="acrylic">but this content is on the Acrylic Fluent Design surface<span/></p><div/>
</body>
So I need Acrylic surface as a universal design component without the limitations of the original post. If somebody knows how to do it I will really appreciate any help.
Thank you (And sorry for my bad writing - I´m not a native speaker so I hope you understand everything I wrote :))
The original answer to the question you link to states that:
Since we use same background for parent and children, we can club them together ;)
However this is not the case for your scenario, you actually want each element to have its own background, right? If I'm understanding you correctly, then you can remove this part of you css:
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
Then to set the background for each section, plus the section's .acrylic background separately, see below:
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 50%;
float: left;
}
.acrylic {
padding: 4em 6em;
position: relative;
overflow: hidden;
}
.acrylic::before {
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
}
.acrylic::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.35;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,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);
}
.shadow {
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}
/* From here down are the changes to the original answer */
.hero,
.about {
position: relative;
z-index: -1;
}
.hero,
.hero .acrylic::before {
background: url("https://images.unsplash.com/photo-1427434991195-f42379e2139d?auto=format&fit=crop&w=1189&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") center/cover;
}
.about,
.about .acrylic::before {
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
}
<main class="hero">
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main class="about">
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
Could you try this, maybe it works:
hero, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
about, .acrylic::before {
background: url("img2.jpg") center/cover;
background-attachment: fixed;
}
is it maybe possible that you provide a Screenshot how you wanna have it? :)
been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>
I'm looking to have below image.
How about this approach?
JSBin
body {
background: white;
margin: 0;
}
.main-header {
background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
background-position: center;
background-size: cover;
min-height: 480px;
position: relative;
}
.main-header::after {
content: '';
display: block;
position: absolute;
background: transparent;
/* You can play around with these numbers to adjust the curve */
bottom: -4rem;
left: -25%;
width: 150%;
height: 400px;
border-bottom: solid 4rem white;
border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>
You can use below code for it
Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-bottom-left-radius:60% 30%;
border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>
if you can use image by img, not background. I think you can try "clip-path" as below.
Codepen example
HTML:
<div class="main-header">
<img src="http://placehold.it/150x150">
</div>
CSS:
img {
-webkit-clip-path: circle(100% at 50% 0);
clip-path: circle(100% at 50% 0);
}
and this site is useful to make clip-path (http://bennettfeely.com/clippy/)