Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading.
I tried something like this but it doesn't work.
body {
height: 100vh;
background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.
CSS:
#container{
height: 100vh;
background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}
body {
background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%);
}
Page:
<div id="container">
// put page code in here like it was body
</div>
Related
body>div {
background-color: red;
}
<div>Need more here</div>
Can someone help with creating the same background as on the bootstrap main page?
I tried with the gradient, but it doesn't work.
I can't get the 4 colors that come together in white in the middle.
.bs {
aspect-ratio: 1/1;
background-image: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1) 85%), radial-gradient(ellipse at top left, rgba(13,110,253,0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132,0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846,0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132,0.5), transparent 50%);
}
<div class="bs"></div>
I'm ussing Bootstrap 4 and wanna try to make a layout like in the screenshot with a normal container of bootstrap over it so my text is nicely alind in te right 6 columns.
Screenshot
Simply adjust the background-size of your background image:
body {
margin:0;
height:100vh;
background:
url(https://picsum.photos/2000/1000?image=1069) left/50% 100% no-repeat,
orange;
}
You can use linear-gradient
body{
background-image:linear-gradient(to right, transparent 50%, orange 50%), url('https://material.angular.io/assets/img/examples/shiba1.jpg');
}
I'm struggling to skew a div like the image below... whereby the bottom and top always cover 50% of the screen width if that makes sense.
I have attached an image for more info
EDIT: this is a photoshop image and I'm trying to recreate this with CSS.
I am not sure about the use case, but you can recreate this using 2 linear-gradient. Each one will have a triangle shape and will cover half the container.
body {
margin: 0;
}
.container {
height: 200px;
background:
linear-gradient(to top left, blue 50%,transparent 50.5%) left/50% 100% no-repeat,
linear-gradient(to bottom right, blue 50%,transparent 50.5%) right/50.5% 100% no-repeat;
}
<div class="container">
</div>
I want to create a CSS background for a HTML5 section and it should look like this:
css triangle:
I have already researched and tried stuff like transform skew or border manipulation. But i can t really achieve the view like i want to.
Is any CSS pro here ? Would be nice.
ps - if a bootstrap solution exists would also help me.
Greets
Tobias
Use a linear-gradient
* {
margin: 0;
psdding: 0;
}
div {
height: 100vh;
width: 100vw;
background-color: blue;
background-image: linear-gradient(10deg, lightblue 50%, transparent 50%), linear-gradient(-60deg, brown 30%, transparent 30%);
}
<div>
</div>
I want to have a background image on the right hand side of one slide in a reveal.js presentation.
I added the image to the slide like this:
<section data-background="myImage.jpg">
// content
</section>
How can I add css styles to make it appear on the right edge of the screen?
This article helped to find the solution. You can add a style to the html element for the current section using
data-state="something"
and of course you can use that style for tweaking your css. So I used this html:
<section data-background="myImage.jpg" data-state="img-right">
// content
</section>
and the following css:
html.img-right div.slide-background.present {
background-position: right;
}
Based on the "new" solution, in the css file you can include something like this, modifying the size and position values will adapt it to the right size and location on the slide.
body {
background-image: url(image1.png),url(image2.png), url(image3.png), url(image4.png);
background-size: 15%, 15%, 15%, 15%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 95% 96%, 95% 3%, 3% 3%, 3% 95%;
}