I'm try to place an image on the pageand I need it to be stretched to the full width and height of the screen (background image). The image is bigger than the screen dimensions and is square so I need it to be the height of the screen and centered.
I need it as an image so I can later on move it and animate it.
So far all I was able to do is give my page a background image:
#page : {
background-image: ~/Images/collage.jpg;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Your solution should work.. however another possible workaround is the following:
page.xml
<Page>
<GridLayout>
<GridLayout id="background" scaleX="2" scaleY="2" />
<!-- page content follows here -->
</GridLayout>
</Page>
page.css
#background {
background-image: url("path-to-image");
}
Use the according scale to stretch the image and from here you can later easily animate your background image.
e.g.
page.getViewById("background").animate({
scale: { x: 1.4, y: 1.4 },
duration: 4000
});
Related
Im trying to make a image that goes from color to greyscale have a fade or something smooth instead of a sharp line at the meeting point between the color and greyscale.
Here's what i have: http://jsfiddle.net/gmU9y/104/
<div class="image-container">
<img class="image-grey" src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg" />
</div>
.image-container {
position:relative;
display:inline-block;
}
.image-grey {
display:block;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.image-container:after {
background-image: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg");
content: "";
height: 30%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
(Notice there's a sharp line at the meeting point between the color and greyscale)
I need it too look more like this:
I really need help and any advice or suggestions will be much appreciated. Thank you
You can get this with background blend mode (but you need to set the image as a background, instead of an image element)
How does it work :
We have in a first layer the image. Another layer on it is gradient going from white to black, and the blend mode is multiply. multiply by black gives black, multiplying by white keeps the original image. So now, we have an image where we can keep or discard the original color, and the decision is based o the gradient luminosity.
The third layer is again the image, and now blends as luminosity. Applied on a black base, will give the image as grayscale. Applied on the same image, will give the colored image.
You can set the grayscale needed changing the levels of the gradient
.test {
width: 400px;
height: 400px;
background: url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"),
linear-gradient(0deg, black 0%, black 20%, white 80%, white 100%),
url("http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg");
background-position: 0px 0px;
background-size: cover, 100% 100%, cover;
background-blend-mode: luminosity, multiply;
}
<div class="test"></div>
You could put a div above the image (or maybe some pseudo element), give that one the desired gradient from black to transparent and then apply a mix-blend-mode CSS rule.
You can then play around with some of the filters to adjust the brightness, etc.
The rudimentary code would look like this:
<style>
.graylayer{
width:1024px;
height:576px;
background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
mix-blend-mode:saturation;
}
img,div{
position:absolute;
}
</style>
<img src="http://wallpapernesia.com/wp-content/uploads/2014/12/colorful_wallpaper_45_backgrounds-1024x576.jpg"/>
<div class="graylayer"></div>
I was actually wondering if it was possible to mask an image to a circular shape with the use of a single pseudo element, which is the image itself? Let's say it's a rectangle image (not square) and you want to have it masked to a circular shape, without the image being squeezed?
So you'd have:
HTML
<img src="#" class="mask">
CSS
.mask {
A lot of CSS possibilities, up to you
}
I know, with a parent div and using overflow:hidden & border-radius:50% it's possible, but can you do it without the use of a second pseudo element?
Update!
I've noticed that many users seem to think I'm only looking for the CSS code border-radius:50% to create circular shapes, but that's not it. The image should become a circular, not elliptical shape. You can simply use a width and height equal to each other, but then the image becomes squeezed. The answer should contain a none-squeezed image result
The requirement of the solution
- The image should be be a perfect circle, not elliptical
- The image should not be squeezed, no matter the original aspect ratio. Even if you'd use a panorama picture, you'd only see the middle part as an circular shape and the rest hidden.
If you can only use the img tag to produce a mask over itself, then the only work around i can think of is : DEMO
.mask {
width: 0px;
height: 0px;
border-radius: 100%;
background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}
If you can use a wrapper, it can keep the original space used by image and mask can be settled anywhere on top of it via coordonates. DEMO
Markup:
<div class="mask r150 top100 left150">
<img src="http://placehold.it/300x400" />
</div>
CSS:
.mask {
position:relative;
overflow:hidden;
display:inline-block;/* preserve display behavior of initila image to mask*/
box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
display:block;/* a way to remove bottom gap*/
}
.mask:before {
content:'';
position:absolute;
border-radius:100%;
box-shadow:0 0 0 2000px white;
}
.r150:before {
height:150px;
width:150px;
}
.top100:before {
top:100px;
}
.left150:before {
left:150px;
}
The use of extra classes can help you to tune different size and mask position.
Here Fiddle: http://jsfiddle.net/8CuXQ/
Something like this:
.mask {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
I want to put an image into a div element, which is much smaller than the image and hide or crop image outside div element. I've done this like this one:
.slideshow img {
width: 250px;
}
.slideshow {
overflow: hidden;
height: 170px;
width: 250px;
position:relative;
}
it works fine, but I image crops from it's top, but I want to center image and then crop it from top and bottom. How can I do this?
Use clip property of css for image or set position relative with negative left and top position
img
{
clip:rect(0px,60px,200px,0px);
}
You can only vertically centre an image in a line that is at least as tall as the image. So the trick is to centre the image in a very tall div, and then use relative positioning to centre the div relative to the original div. The CSS you'll need on the inner div is something like vertical-align: middle; line-height: 850px; position: relative; top: -340px;.
Just add:
position:relative;
left:-25%;
top:-25%;
to your .slideshow img class
This should work.
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)