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%;
}
Related
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>
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 place a background image in each corner of the web browser (left upper, left lower, right upper and right lower). I placed this code in the css external style sheet:
body{
/* Four background images */
background-image:
url(Bookclubwebsite/cornertl.jpg,
url(Bookclubwebsite/cornertr.jpg,
url(Bookclubwebsite/cornerbl.jpg,
url(Bookclubwebsite/cornerbr.jpg;
/*Their positions*/
background-position:
top left,
top right,
bottom left,
bottom right;
/* These apply to all images above */
background-repeat:no-repeat;
background-attachment:fixed;
}
Instead I get all 4 images next to each other at the bottom of the web page. The images don't overlap but are next to each other with space between each image from the other image.
In order to apply, your CSS needs to be valid.
So you need to close the parenthesis of each url() in your background-image rule:
body{
background-image: url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50);
background-position:
top left,
top right,
bottom left,
bottom right;
background-repeat:no-repeat;
background-attachment:fixed;
}
Here's the exact snippet you need to copy/paste in your CSS on your website for background to work:
body {
background-image: url(Bookclubwebsite/cornertl.jpg), url(Bookclubwebsite/cornertr.jpg), url(Bookclubwebsite/cornerbl.jpg), url(Bookclubwebsite/cornerbr.jpg);
background-position: top left, top right, bottom left, bottom right;
background-repeat:no-repeat;
background-attachment:fixed;
}
Here is my CSS that is working fine for 4 background images for each corner of the web page. You can modify your CSS accordingly.
body {
background-image: url('w3css.gif'), url('w3css.gif'), url('w3css.gif'), url('w3css.gif');
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom;
}
I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
I have a couple background images here:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 400px, 50% 400px;
}
The issue is when I try to set the y to 100% it doesn't seem to work. The images seem to be getting the 100% measurement from something other than the entire page. Is there a way that I can have two images as the background and use CSS to position the images as 100%?
Here is a fiddle for further example.
Live Demo
Thank you in advance!
I think (though I'm not 100% certain!) you're saying that this doesn't work:
html{
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg),
top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
}
This has a result that looks like this.
If you set the height of html to 100%, however, it works fine:
html {
background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_%20Red%20Fox%20Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Riverfarm.jpg);
background-size: 50% 100%, 50% 100%;
height: 100%;
}
This has a result that looks like this.