I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.
So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.
Thank you.
Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs
<style>
.screen {
height: 422px;
width: 820px;
}
.back {
position: absolute;
height: 422px;
width: 820px;
background-image:url('test.png');
}
.content {
position: absolute;
height: 320px;
width: 672px;
margin-left: 73px;
margin-top: 56px;
border-radius: 50px;
overflow:hidden;
}
</style>
<div class="screen" >
<div class="content" >
put here what ever you want to put inside
</div>
<div class="back" ></div>
</div>
this work with me with your image
You could use the before/after psuedo elements to attach your unusual "border" as a background image.
div.slide {
background: yellow;
position: relative;
}
div.slide:before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: url(slide-bg.png) no-repeat;
background-size: 100% 100%;
z-index: 1;
}
http://jsfiddle.net/kTgJJ/
The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.
Related
How could we use CSS mix-blend-mode, if the background image/video is not the parent of the element which gets the mix-blend-mode?
For example
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The div with the class .caption-above-video should have a colored background with a mix-blend-mode. But the effect not appears. When using mix-blend-modes somewhere, the element with the blend-mode is the direct child of the parent with the background image, but in this example this is not possible because of a full with and height background video. Also I cannot manipulate the DOM output, because its coming from a page builder.
How could we use CSS mix-blend-mode effects when the containers are siblings?
Mix-blend-mode does not work with siblings.
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.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values
I actually can't see what the problem is.
If you overlay the video with another element (by giving that element position absolute and the same size as the video for example - but there are lots of ways of doing this) and they are siblings (i.e have the same parent) then the mix-blend-mode seems to work perfectly well.
.parent {
width: 80vmin;
position: relative;
}
video {
position: relative;
width: 100%;
}
.caption-above-video {
background: red;
mix-blend-mode: multiply;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="has-video-background">
<video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The only thing I did 'extra' was to make the overlaying element have pointer events of none so that I could use the controls on the video. If you need pointer events on the overlay then you'll need to implement the video controls yourself e.g. with JS.
As far as I know, it comes down to which div is on top. So by using position: absolute; and a z-index for example, you add mix-blend-mode to the div that is "on top" of the other div.
I added a code snipped so you can see what I've done to accomplish this.
-I did add a container around the two divs for styling purposes for this example.
-Added an extra div in the .caption-above-video that has the background-color and mix-blend-mode. This is important if you don't want the h1 to be affected by the mix-blend-mode, because that affects all children too.
Also added an background-image to the .has-video-background so you can see the result better. This is for demonstration purposes only and as soon as you add the actual video, the result will be the same.
.container{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
height: 300px;
}
.has-video-background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: lightblue;
}
.caption-above-video{
position: absolute;
width: 200px;
height: 150px;
}
h1{
position: relative;
z-index: 2;
color: white;
}
.background-div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: green;
}
<div class="container">
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>Caption</h1>
<div class="background-div"></div>
</div>
</div>
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I have a problem hiding the <img src="/"> and overlay the background image on a media 480px version.
I tried to use the code based on CSS background image on top of <img> and it doesn't work for me.
JDFIDDLE
HTML
<div class="j_img-overlay">
<img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>
CSS
.j_img-overlay {
width: 100px;
height: 100px;
}
.j_img-overlay img {
background-size: auto;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
position: relative;
box-sizing: border-box;
width: 100px;
max-width: 100px;
z-index: 100;
}
First of all <img/> element should not display background-image. Additionally, only background property let you adjust all of the available background style options at once so, unfortunately background-image can takes only image urls and not repeating value.
Find here more about Background Image and Background css properties.
To make the overlay works properly you can using pseudo element (after, before) with absolute positioning to fill the container of the image element. Relative position is required for the container to avoid leakage of the pseudo element (with the absolute position that we defined).
Find here more about Pseudo Elements - CSS.
Working example:
.j_img-overlay {
position: relative;
width: 100px;
}
.j_img-overlay::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
background-size: cover;
}
.j_img-overlay img {
display: block;
width: 100%;
}
<div class="j_img-overlay">
<img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>
having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/
I want to mask out part of an image on a page, making part of the image darker so a highlighted portion stands out. (This is often used to preview the effect of the crop tool in photo editors.)
Currently, my plan involves loading two copies of the images on top of each other and using clip: rect(); to slice out of a portion of the top image. Is there a better way to handle this? I should also mention that my image is actually an animated GIF (oh dear ...)
I thought it best to figure this out before I started trying to update the crop with javascript.
CSS:
.container {
width: 1075px;
margin: 10px;
border: 1px solid black;
padding: 10px;
overflow: auto;
}
.image-container {
position: relative;
clear: both;
background-color:#eee;
}
.background{
opacity:.40;
}
.highlight {
position: absolute;
top: 0px;
left: 0px;
clip: rect(126px 257px 197px 156px);
}
HTML:
<div class="container">
<div class="image-container">
<img class="background" src="animate.gif" width="1075" height="605" />
<img class="highlight" src="animate.gif" width="1075" height="605" />
</div>
</div>
Position the image using position: absolute for each image. The layer above should be smaller then the bottom one. Than use background-position: x y;
Something like this:
#image1, #image2 {
position: absolute;
left: 0;
top: 0;
background: url('https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif')
}
#image1 {
min-width: 276px !important;
min-height 110px !important;
opacity: 0.5;
}
#image2 {
left: 251px;
width: 25px;
height: 110px;
background-position: 100% 100%;
}
Look here an example:
http://jsfiddle.net/8n3Rr/
Try to position a <div> over the images, put a low opacity on it and a width or height half the size of the image.