I would like to add to my image a layer with colour and set blend mode, for example multiply to 50% of all image width. Like that:
I know how to create that to full image, by how to create on 50% of image width?
Here is example on full image
[https://codepen.io/Matteokr/pen/PyJwKB][2]
One way to achieve that is to use background-blend-mode like this:
*{box-sizing:border-box;padding:0; margin:0}
.wrapper{
position: relative;
width: 480px;
height:320px;
margin: 64px auto;
background-image: url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.image{
position:absolute;
left: 0;
top: 0;
width: 480px;
height:320px;
background-blend-mode: color;
background-color: #ffff006e;
background-image: linear-gradient(yellow, #d3e600), url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.wrapper,
.image{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.layer{
position: relative;
width: 65%; /*change the percentage here*/
height:100%;
overflow: hidden
}
<div class="wrapper">
<div class="layer">
<div class="image"></div>
<div>
</div>
Related
I've ran out of hope for this for the past few days,what I'm basically trying to do is to do this:
CSS:
.div1{
/* background-image code */
}
HTML:
<div class="div1">
<!--Image here-->
</div>
Is it even possible to have a background image larger than the image in the div itself?
See the following example to achieve what you are looking for. Basically you can combine a color and an image by using both the background-color and background-image props at the same time. Position and scale the image with background-size and background-position. background-repeat: no-repeat; is important to be able to see the area that is the simple color background.
.div1 {
background-color: blue;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 300px;
}
<div class="div1">
</div>
For two images layered in this way:
.div1 {
background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg);
width: 400px;
height: 300px;
position: relative;
color: white;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
/*to center the text */
display: flex;
align-items: center;
justify-content: center;
}
.div1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: cover;
/*to set this image layer behind the duck one */
z-index: -1;
}
<div class="div1">
Example content text
</div>
you can add width and height in each img and background-image
.div1{
width: 100vw;
height: 500px;
/* background-image code */
}
img {
width : 200px;
height : 200px;
}
<div class="div1">
<img src="code.png" alt="">
<!--Image here-->
</div>
Give the img some padding and put the background image on it.
div {
width: fit-content;
}
img {
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
padding: 30px;
}
<div>
<img src="https://picsum.photos/id/1016/200/300">
</div>
I would like my image to scroll on the scroll in the leaning block, but once you get to a certain scroll level, you start to see white space appear.
This is the way I did it
.single-race__s2-container{
padding: 150px 0 300px;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
transform: skewY(-5deg);
margin-top: 150px;
margin-bottom: 1500px;
}
.single-race__s2-container:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display:block;
background-color: rgba(0,0,0, 0.5);
}
.single-race__s2-content{
transform: skewY(5deg);
}
<div class="single-race__s2">
<div class="single-race__s2-container"
style="background-image: url('https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc')">
<div class="single-race__s2-content o-wrapper">
<p>Lorem ipsum dolor</p>
<span>test</span>
</div>
</div>
</div>
am I doing it the right way or is there no solution?
You can try using the clip-path property. Create a container for your background image, that has the shape you want and load the image as a background-image. Apply position fixed to that container, set the height of the background-image to e.g. double the container height, and then use overflow: scroll
That way the background image is scrollable, without showing white space at the bottom.
HTML:
<div class="image-container">
<div class="image"></div>
</div>
CSS:
.image-container {
clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
width: 100%;
height: 300px;
position: fixed;
overflow: scroll;
}
.image {
background-image: url(https://i.picsum.photos/id/355/1440/1000.jpg?hmac=QRHj9Ni2849l3Nfu1nLwhURgp2ncK9AsIsQZuXRHfVc);
background-size: cover;
background-position: center;
width: 100%;
height: 600px;
}
Adjust the height as needed and make sure you prefix the clip-path for all standard browsers.
I know there are questions similar to this one, but none of them worked for me.
I have a div class with a background image:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
}
Is there any way to make the #index-box div class so high, that the whole background image fits in?
If you know the aspect ratio of the image you can put all in a container with percentage padding and relative position. then another box full width and height with absolute position for the content. For the below image the original size of the image is 1280X720, so the ratio height/width 0.5625:
#background {
position: relative;
padding-bottom: 56.25%;
background-image: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg');
background-size: cover;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="background">
<div id="content">some content<div>
</div>
Also, with similar way you always can use the image as an img element. so you even not need to know the aspect-ratio. like that:
#container {
position: relative;
}
#bg {
width: 100%;
display: block;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="container">
<img id="bg" src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"/>
<div id="content">some content</div>
</div>
try to apply this code:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
object-fit:cover;
}
or
body{
margin:0;
width:100%;
}
#index-box{
height:100%;
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
background-position:center;
}
I have a background image that adapts to the screen height and is on full width. Problem is, when I resize my width, the image stretches instead of fill. Also, the content that should be below it overlays the image totally.
This is my code so far.
HTML:
<div id="bg">
<img src="http://placehold.it/2560x1000" class="img" alt="" />
</div>
<div id="content">
<!-- some content -->
</div>
CSS:
#bg {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.img {
background-position: center center;
background-size: contain;
height: 100%;
width: 100%;
position: relative;
}
And here's a fiddle for it: http://jsfiddle.net/anm5sqft/
You use "background-position" and "background-size" but you doesn't have a background, because your image is not a background, it's an image.
Try this :
HTML
<div id="bg">
</div>
CSS
#bg {
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("http://placehold.it/2560x1000");
}
body{
margin: 0;
}
Example with JSFiddle
.bg-section {
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
height:100vh;
}
<div class="bg-section" style="background-image:url(http://placehold.it/2560x1000)"></div>
http://jsfiddle.net/1wurw0zu/
We want to display an image like this centred in a page: the height should be 100% of the window height, with corresponding proportional width. On either side of the image, we'd like to continue the grey brick pattern that you see at top and bottom of the image across the page on either side. The background should match the size of, and line up with, the one in the image, however big the image is.
Can anyone suggest a CSS-only way to do this?
Here's the kind of markup I've been trying so far:
<div id="container">
<img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>
CSS:
#container {
height: 100%;
background: url(visual-top.png) repeat-x;
}
#middle {
outline: 1px solid red;
display: block;
height: 100%;
margin: 0 auto;
}
Here's a Codepen.
Sure you can. You might run into aliasing-problems so that your images don't line up perfectly, but in theory it's easy.
The way I would do it is using multiple backgrounds. Here is the CSS you need:
body {
background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
background-size: auto 100%, auto 17.5%;
}
Then you need to fiddle with the height of the tile. I came up with 17.5%, but that depends on your screenshot.
Here is a working fiddle.
<div id="brick">
</div>
<div id="mario">
</div>
css
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#brick{
position:absolute;
width: 100%;
height: 60px;
background-color:gray;
background-image: url(brick.jpg);
background-size: 100% 100%;
top:0;left:0;
z-index: -1;
}
#mario{
width: 400px;
height: 100%;
z-index: 2;
background-image:url(mario.jpg);
background-size: 100% 100%;
margin: auto;
border: 1px solid;
}
yes it can be done.
<div class="wrapper"><img src="yourimage.jpg"/></div>
the css
.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}
So it will be on top of your background
html:
<div class="wrapper">
<div class="top"></div>
<img src="path/to/img.jpg"/>
</div>
and the css:
.wrapper{
text-align: center;
height: 100%;
width: 100%;
position: relative;
}
.wrapper .top{
position: absolute;
height: 80px;
left: 0px;
top: 0px;
background: url('pattern.jpg') 0 0 repeat;
width: 100%;
z-index: -1;
}
.wrapper img{
height: 100%;
width: auto;
}
<body>
<style>
.main{
width:100%;
display:table;
text-align:center;
height: "image-height";
}
.wrapper{
width:100%;
height:auto;
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="main">
<div class="wrapper">
<img src="image.jpg">
</div>
</div>
</body>
You can try this. This is nice article.