I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
Related
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
This is Hapenning-
I need this-
I need to move the background image(orange circle) of my element outside of the element. Is it possible using CSS or Javascript?
Due to the structure of the HTML, I can not take another element inside the div. Need to doi it using :after only if possible.
.element:after {
display: inline-block;
content: "";
height: 250px;
width: 217px;
position: absolute;
border-bottom: 1px solid #ff9400;
border-left: 1px solid #FF9400;
z-index: 15;
background: url('files/images/icon5.png') no-repeat;
background-position: 100% 100%;
}
Just need to move my icon5.png outside of the box of element.
This is what you want to do. Define a background element which only contains your image. size it to whatever you need. and then you make a smaller element inside of it. The following is an example of what I mean:
<style>
#BACKGROUND {background: url("testimage.jpg");width:50px;height:50px;}
#OVERLAP {color:#000;padding:10px;}
</style>
<div ID="BACKGROUND">
<div ID="OVERLAP">
ABC
</div>
</div>
Here, I created a background (DIV) element that's 50 by 50 pixels and then inside of that, I created another (DIV) element specifically for text that overlaps the image starting at 10 pixels in as defined via the padding statement for the DIV with the ID of OVERLAP. if the image is still in the way after adjusting numbers, then you can edit the image to include white space and adjust the sizes (pixel values) accordingly.
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
(Source:http://imgur.com/5pKaiea.)
Hey I basicly got two of the files above one "header" and one "footer" both same size kinda just flipped.
The problem is the width doesn't fit on page, any ways other than background-image: cover?
The file is basicly 1280 px wide and around 114 px tall.
div #header {
background-image:url(../img/webclient_header.png);
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
In CSS you can use the property background-size to resize the image to fit:
div #header {
background-image:url(../img/webclient_header.png);
background-size:800px 114px; /* Choose your size here W x H */
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
UPDATE: Checkout the code update on jsfiddle http://jsfiddle.net/bKZ8N/
If you're looking to have responsive images on your website, background-image is not really the best path to take. You'd need to either use may CSS media queries to serve different background images sizes or use something like background-size property which is not compatible with older browsers.
I would suggest doing something like this:
<header>
<img src="you-image.jpg" width="100%" height="auto" />
</header>
That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.
Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.
EDIT:
To answer your question in comments
Kind of...
So you would have at least 3 images header_middle_piece.jpg (the middle of the image that is pointing "down"), footer_middle_piece.jpg (the rotated version of header.), and repeating_pattern.jpg
From there you would have your leveled layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Use the same type of layout for your footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Make this the height of the pattern you are using.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // height of the middle piece.
width: 200px; // width of middle piece
margin: 0 auto; // center the container.
}
Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.
We know how to use CSS to show only part of an image within a div (i.e., image sprites), but the image has to be a background image.
We know how to use CSS to scale an image, but the image has to be an IMG.
Does anyone know of a way to scale and image and show only part of it?
For example, I want to:
show pixels (15,15) through (100,100), and
scale it up by 200%.
The first I can do by making in a background image. The second I can do by making it a foreground image. But so far, I have not ascertained how to do both. Is it even possible using only CSS/HTML?
You could scale the image just as you would normally. Then, use a container div to crop the image. To set where the crop rectangle goes, use position: relative on the image (not the containing div). Here's an example using stackoverflow's logo:
<style type="text/css">
div {
/* Set size of crop area. Setting its location happens bellow. */
width: 150;
height: 100;
overflow: hidden; /* Crop it like it's hot! */
/* not part of the implementation; only to display what's going on */
border: 1px solid black;
background-color: #ddd;
}
img {
/* Set the crop location by shifting the image
* up by 70px and to the right by 30px.
*/
position: relative;
top: -70px;
left: 30px;
/* Scale the image as you normally would. */
width: 300px;
height: 150px;
}
</style>
<div>
<img src="http://sstatic.net/so/img/logo.png">
</div>