I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
Is it just me? Do you have a solution for displaying only a half of an image?
Update (after 5+ years):
The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Original:
CSS clip property does not currently support percentages:
http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping
A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:
var heightOfImageToDisplay = image.height / 2;
Sorry that I don't have enough reputation to write a comment.
There's absolutely a solution without JS.
All you need to do is
Create an svg clipPath, which allows you define whatever path you want.
Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition
Apply the clipPath in your css code.
#your-element {
clip-path: url(#clipPathId);
}
If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151
You could have the div as position: relative; and overflow: hidden;
Have the image inside as position: absolute;
And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image
If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hidden and proper background-position so it only shows the top one from the top down and bottom one from the bottom up?
Related
I want my background-image to follow the shape of its element. Like if I set my element's clip-path to:
clip-path: polygon(0 0, 50% 10%, 50% 90%, 0% 100%);
I want the background-image to change its size and aspect-ratio to match the element's clip-path.
Everything I try crops the background image instead of reshaping, stretching or squeezing it..
You may use background-size and eventually set some coordonates of your clip-path into css var() so it can be used by background-size:
here an example from your clip-path
html {
background:green;
--clipRight: 50%;/* value setting how far from left you clip the element */
}
body {
margin:0;
min-height:100vh;/* min-height because demo has no content to fill and stretch body */
clip-path: polygon(0 0, var(--clipRight) 10%, var(--clipRight) 90%, 0% 100%);
background:url(https://dummyimage.com/300) 0 0 / var(--clipRight) 100% no-repeat yellow;
}
Note that you might also need to set a different background to html and body to be sure your resized image is drawn on body and not transfered and drawn on html.
I rely on the using a wrapper to center most of my sites ala:
.wrapper {
margin:auto;
max-width: xxxpx;
}
Keeps things centered perfectly, BUT also clears the margins, which is causing my problems as I want to use a clip-path background to create a simple polygon background, which needs to go through the margins, like:
.wrapper {
background-color: #ebeef2;
clip-path: polygon(0 10%, 37% 0, 100% 10%, 100% 90%, 63% 100%, 0 90%);
}
How can I get all of the elements of my page centered without clearing the margins?
Every solution I've tried ends up with impossible to manage page centering of elements, or a cleared page margin.
Here is the full bleed clip path I want.
Here is the problem.
Here are codepens: no margin, margin with busted clip-path
What I tried:
#page-text {
background-image:
url(./images/paper-top.png),
url(./images/paper-bottom.png),
url(./images/paper-mid-2.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: 0 0, 0 100%, top 10px;
background-size: 100% auto;
}
Unfortunately the repeating part repeats all over #page-text and since paper-top is partly transparent, paper-mid-2 is visible in those transparent parts. For illustration notice the top corners of the paper (or see the live version)
You are probably better off dividing #page-text into three vertical sections. A nice way to do that without extra HTML is to use :before and :after on #page-text, holding the top and bottom background images and placed above and below #page-text respectively. That way, you can let the middle background image repeat as much as needed without interfering with the top and bottom background images. You also then don't need CSS3, thus providing a more backward-compatible solution.
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);
What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:
background-size:500px;
(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).
So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.
Thanks!
You just need to add color stops to your gradient, like so:
Working Example
body, html {
height:200%;
}
body {
background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}
MDN Documentation for Linear-gradient
So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).
http://jsfiddle.net/myajouri/y4b3Z/
I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.
Any idea how can i make a text wrap inside a rotated div.
Text won't stay inside div after rotated..
Here's a screen of the idea...
Thanks in advance..
The only thing that comes to my mind to solve this problem are CSS Regions (http://html.adobe.com/webstandards/cssregions/).
I've set up a small demo to show you how it works, here's the code:
div {
-webkit-shape-inside: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
}
And here's the demo: http://jsfiddle.net/sandro_paganotti/ABdgB/.
Unfortunately it works only on the latest Chrome, plus you have to manually enable 'Enable experimental WebKit feature' in your chrome://flags panel.