This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Can I set background image and opacity in the same property?
(15 answers)
Closed 1 year ago.
Just trying to make my background image with opacity but still be able to see text normally and write on it, I found ways to see text but can't write on it and when it works to see text and write on it, it was only half the screen or the background image didn't cover everything so I am just trying to see if I can find some help here.
* { margin: 0; padding: 0; }
/* Centering */
body
{
text-align: center;
}
/* Title Size and Font */
#title
{
font-size: 40px;
font-family: Mv Boli, sans-serif, arial;
}
/* Description Size and Font */
#description
{
font-size: 20px;
font-family: Mv Boli, sans-serif, arial;
}
/* Background Image */
.background-image
{
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: -5000;
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* Survey Form Styling */
#survey-form
{
background: hsl(204, 94%, 65%);
max-width: 500px;
margin: 50px auto;
padding: 25px;
}
<body>
<h1 id="title">Survey Form for Tech</h1>
<p id="description">Help us improve your experience!</p>
<!-- Background Image -->
<div class="background-image"></div>
<!-- Survey Form -->
<form id="survey-form">
<div class="form-flow">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" required="" placeholder="Enter your name">
</div>
</form>
</body>
All solved I had 2 URL to the image, so they would conflict.
Updated Situation
In this case, you can your ::after pseudo-element for your background image and opacity.
* {
padding: 0;
margin: 0;
}
.background-image{
Position:fixed;
Top: 0;
Bottom: 0;
Width: 100%;
Height: 100%;
}
.background-image:after {
position: absolute;
content: '';
background: url('https://via.placeholder.com/150/0000FF/808080') no-repeat center center / cover;
width: 100%;
height: 100%;
opacity: 0.5;
}
#survey-form {
//background: hsl(204, 94%, 65%);
background: red;
padding: 0;
margin: 50px auto;
position: absolute;
z-index: 1;
width: 500px;
height: 300px;
left: 50%;
transform: translateX(-50%);
padding: 20px;
}
<div class="background-image">
<div id="survey-form">
<p>Text 1</p>
</div>
</div>
It shows the background opacity.
In your css style, please put it lower case .
https://jsfiddle.net/ru8bz7y3/2/
* { margin: 0; padding: 0; }
body
{
text-align: center;
}
/* Title Size and Font */
#title
{
font-size: 40px;
font-family: Mv Boli, sans-serif, arial;
}
/* Description Size and Font */
#description
{
font-size: 20px;
font-family: Mv Boli, sans-serif, arial;
}
/* Background Image */
/*background-image:after
{
content: "";
display: block;
width: 100%;
height: 100%;
background-image: url(Tech.jpg);
opacity: 0.25;
}*/
.background-image
{
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.25;
z-index: -5000;
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* Survey Form Styling */
#survey-form
{
background: hsl(204, 94%, 65%);
max-width: 500px;
margin: 50px auto;
padding: 25px;
}
<body>
<h1 id="title">Survey Form for Tech</h1>
<p id="description">Help us improve your experience!</p>
<!-- Background Image -->
<div class="background-image">
</div>
<!-- Survey Form -->
<form id="survey-form">
<div class="form-flow">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" required="" placeholder="Enter your name">
</div>
</form>
</body>
Related
I want my background image to take 50% of the div and the rest 50% to be text (the birthday text message) below it in a div which has flex-direction:column. Currently, the background image changes its height automatically (sometimes more than 50%, sometimes less than 50%) based on screen size, but I want it to always take 50% height with the "Birthday card image (Happy Birthday)" overlapping the envelope in the background as shown in the screenshot below, and the rest 50% for the text (birthday wish). How can I achieve that?
HTML file
<section class="normal-page">
<section class="e-greeting-design">
<div class="first-half">
<div class="first-half__bg-wrapper"> <img src="/assets/images/egreetingbg.png"></div>
<div class="first-half__img-wrapper"><img src="/assets/images/card-egreeting.png" alt=""></div>
</div>
<div class="second-half">
<div class="second-half__content-wrapper"><span>To: </span><span class="text-bold">Andy Raey</span>
<p class="text-bold">Happy Birthday! May you celebrate your 35th with all who are dear to you.</p>
</div>
</div>
</section>
</section>
SCSS File
.e-greeting-design {
width: 90%;
background-color: white;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1280px;
flex-direction: column;
margin-top: 20px;
> * {
flex: 1 1 100%;
}
.first-half {
position: relative;
&__bg-wrapper{
width: 100%;
object-fit: cover;
}
&__img-wrapper{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
width: 70%;
}
img {
object-fit: cover;
width: 100%;
display: block;
}
}
.second-half {
&__content-wrapper{
max-width: 75%;
margin: 80px 60px;
> span,> p{
font-size: 32px;
color: #5C068C;
font-size: 20px;
line-height: 32px;
}
p {
margin-top:48px;
font-size: 20px;
line-height: 32px;
}
}
}
}
Current output
*How I want it to look like *
This question already has answers here:
Transparent text cut out of background
(14 answers)
Cut-out text with CSS
(3 answers)
How to apply inverse text mask with CSS
(4 answers)
Cut out text in CSS. Possible? [duplicate]
(1 answer)
transparent text but opaque background in css [duplicate]
(1 answer)
Closed 3 years ago.
Let's say I have an image like this:
and I want to fill an <h1> tag with that image to look something like this:
I guess I could do something like this to start...
div {
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>
<h1>404</h1>
</div>
Should I have another 'absolute' div white covering the image and a transparent font over? Does anyone know how to accomplish this?
background-clip might be an option
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
div {
width: 100%;
height: 100%;
}
h1 {
color: transparent;
font-size: 28vmax;
background-size: cover;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-clip: text;
}
<div>
<h1>404</h1>
</div>
or mix-blend-mode:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.
also
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
* {
margin: 0;
}
div {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
font-size: 15vmax;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
background: white;
mix-blend-mode: screen;
}
<div>
<h1>404</h1>
</div>
You can try using -webkit-background-clip: text;
This is called Knockout Text but you should be able to get the outcome you want with it.
Here are a few examples, but it might be easier to do it in photoshop and then insert the image. (Just an alternative)
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
* {
margin: 0;
padding: 0;
}
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.75em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(https://picsum.photos/480/200?random);
}
.clip-text_two {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_tree {
background-image: url(https://picsum.photos/480/200?grayscale&random=2);
}
.clip-text_four {
background-image: url(https://picsum.photos/480/200?grayscale&blur=3);
}
.clip-text_five {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_six {
background-image: url(https://picsum.photos/480/200?random=3);
}
.clip-text_seven {
background-image: url(https://picsum.photos/480/200?random=4);
}
.clip-text_eight {
background-image: url(https://picsum.photos/480/200?random=6);
}
.clip-text_nine {
background-image: url(https://picsum.photos/480/200?random=5);
}
.clip-text_ten {
background-image: url(https://picsum.photos/480/200?random=7);
}
.clip-text_eleven {
background-image: url(https://picsum.photos/480/200?random=8);
background-size: cover;
}
.clip-text_twelve {
background-image: url(https://picsum.photos/480/200?random=9);
}
.clip-text_thirteen {
background-image: url(https://picsum.photos/480/200?random=10);
}
.clip-text_fourteen {
background-image: url(https://picsum.photos/480/200?random=11);
}
.clip-text_fifteen {
background-image: url(https://picsum.photos/480/200?random=12);
}
<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">TEST</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_twelve clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_two">TEST</div>
<div class="clip-text clip-text_fourteen clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree">TEST</div>
<div class="clip-text clip-text_eleven clip-text--cover">TEST</div>
<div class="clip-text clip-text_four">TEST</div>
<div class="clip-text clip-text_five">TEST</div>
<div class="clip-text clip-text_six">TEST</div>
<div class="clip-text clip-text_seven">TEST</div>
<div class="clip-text clip-text_eight">TEST</div>
<div class="clip-text clip-text_nine">TEST</div>
<div class="clip-text clip-text_ten">TEST</div>
<div class="clip-text clip-text_thirteen clip-text--cover">TEST</div>
</div>
Let me know if you have any questions! The implementation is fairly straight forward I made sure to include options for you to look at, here is a link for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
I want to create a landing page like a game. The visitor gets the option either to chose "Professioneel" or "Speels".
Telling it is easy but programming it is hard for me, so this is what I want:
2 div's with 2 different background-image when someone hover over one of the divs I want the background-image to scale (ONLY THE IMAGE) and the opacity placed on the div to change from 50% to 80%.
And a really nice future would be to display a snow falling gif over the image.
This is what I want to create:
Before
After:
What I have achieved till now is making the 2 divs with a background-image and I'm not even sure if that is the right way.
Can someone please help me out?
This is what happens when I hover with my current code: (the whole div scales, not only the image)
As an user asked, here some code:
#containerEntree {
height: 100vh;
width: 1920px;
padding-left: 0;
padding-right: 0;
}
#professioneelContainer {
background-color: red;
text-align: center;
width: 1920px;
height: 475px;
}
#speelsContainer {
background: red;
width: 100%;
height: 475px;
text-align: center;
}
.entreeTekst:hover {
transform: scale(1.2);
}
.entreeTekst {
width: 100%;
height: 100%;
position: relative;
transition: all .5s;
margin: auto;
}
.entreeTekst > span {
color: white;
/* Good thing we set a fallback color! */
font-size: 70px;
position: absolute;
}
<div class="container" id="containerEntree">
<div id="professioneelContainer">
<div class="entreeTekst">
<span>professioneel</span>
<img src="img/professioneel.jpg" />
</div>
</div>
<div id="speelsContainer">
<div class="entreeTekst">
<span>Speels</span>
<img src="img/speels.jpg" />
</div>
</div>
</div>
Please note that I'm still working on it so don't say that this (of course) won't work.
You can do this by using 2 divs with background images and use padding on the div to replicate the aspect ratio of the background image. Scale the image using background-size on :hover. Then use a pseudo element to create the color overlay and transition the opacity on :hover, then use the other pseudo element on top of that with the text and the "snow" gif as a background.
body {
width: 600px;
max-width: 80%;
margin: auto;
}
div {
background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
height: 0;
padding-bottom: 33.33333%;
position: relative;
transition: background-size .25s;
}
.speel {
background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
opacity: .5;
transition: opacity .25s;
}
.pro::before {
background: blue;
}
.speel::before {
background: red;
}
div::after {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
}
.pro::after {
content: 'PROFESSIONEEL';
}
.speel::after {
content: "SPEELS";
}
div:hover::after {
background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
opacity: 0.8;
}
div:hover {
background-size: 150%;
}
<div class="pro">
</div>
<div class="speel">
</div>
You can simply increase the background-size: height width; and opacity: value; property when you hover over an element. You can, if you want to, add some transition to make it smooth. This only scales the background image, not the div itself.
#d {
background-image: url(https://cdn.pixabay.com/photo/2016/10/29/20/52/cincinnati-1781540_960_720.png);
height: 200px;
width: 200px;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
/*To make the transistion smooth*/
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
opacity: 0.5;
}
#d:hover {
background-size: 110px 110px;
opacity: 0.8;
}
<div id='d'>
</div>
I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.
You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>
You can check out how to add a video Tutorial
Edit: Edited fiddle
var $vid = $('video','#container');
var $msg = $('#custom-message');
$msg.css({
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});
video {
position: relative;
z-index: -1;
}
#custom-message {
position: absolute;
color: rgb(230, 200, 200);
z-index: 1;
}
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div id="container" align="center">
<video width="640" height="320" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
<div id="custom-message">
Need a Network?</div>
<div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
</div>
</div>
</div>
</div>
</div>
</section>
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);