After trying a gruesome lot of time I am still not gaining the correct co-ordinates or pixels to clip/crop out my image
the image:
https://i.stack.imgur.com/y4L2T.jpg
I want to clip out the right and left white portion of the image.Thanks.
Is this what your wanting? The clip property does NOT CHANGE THE IMAGE SIZE!
img {
position: absolute;
clip: rect(58px 416px 532px 184px);
}
body {
background-color: #000;
}
<img src="https://i.stack.imgur.com/y4L2T.jpg">
I really think this is what you want:
div {
position: relative;
height: 475px;
width: 234px;
overflow: hidden;
}
img {
position: absolute;
left: -183px;
top: -58px;
}
<div>
<img src="https://i.stack.imgur.com/y4L2T.jpg">
</div>
Related
I have an image located inside a div, I am trying to move it 50 px down and 50 px left in order to have everything complete. But I am not sure how to edit the image in the CSS since I don't know what code to put in to connect the photo to the css.
My code:
#OverviewText4 img:MoneyIcon.png {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
Thanks for helping
Remove the image name from your declaration and make sure your container is set to position: relative so that your image is absolutely positioned against the right containing element in this instance #OverviewText4
#OverviewText4 {
position: relative;
}
#OverviewText4 img {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
You have to add position:relative to parent <div> and then add position: absolute; to the <img>. Like this:
#OverviewText4{
position: relative;
}
#OverviewText4 img{
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
There are many ways to do this in CSS as per the multitude of answers. If I might suggest, since the image name in your example is related to iconography a slightly different approach:
#OverviewText4 {
position: relative;
}
#OverviewText4:before {
content: "";
background: transparent url(MoneyIcon.png) scroll no-repeat 0 0;
background-size: cover;
width: 150px;
height: 150px;
position: absolute;
display: block;
top: 50px;
left: 50px;
}
https://jsfiddle.net/zk8su1qw/
This way you don't even need an img tag in the HTML, which is desirable if its just presentational.
There is also an assumption in this answer that you want the image displayed over the top of any content in the OverviewText4 div, rather than having content flow around the image. If this is not the case you would want to use margins and keep the image position: static or relative.
Right, your CSS is fine but your selector is not. I think this is what you were going for.
#OverviewText4 img[src="MoneyIcon.png"] {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
I've changed img:MoneyIcon.png (which doesn't mean anything to CSS) to img[src="MoneyIcon.png"] which means an img tag where the src = MoneyIcon.png
The main problem here is if you change the src you have to change your CSS also, I'd recommend having a class like this:
#OverviewText4 img.money-icon {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img class="money-icon" src="http://placehold.it/150x150" />
</div>
I hope you find this helpful.
You can simpy do this with padding
#OverviewText4 img {
padding:50px 0 0 50px;
}
Use the marginattribute for creating a margin around an element. You can also use padding on the div element.
Try it like this:
#OverviewText4 img: MoneyIcon.png{
width: 150px;
height: 150px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
You can link an image to a CSS class by adding the class name inside the tag <img>
Working Example:
body {
background: #111
}
.OverviewText4 {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<body>
<img src="MoneyIcon.png" class="OverviewText4" />
</body>
If I understand your question correctly all you have to do is add this style to your div where the image is located.
div > img {
margin-top: 50px;
margin-left: 50px;
}
I have my resume in an iframe div that overlays my portfolio section when a link in my nav is clicked. I have an "X" image for user to click to close overlay, and I want to place it to the right of the resume iframe (ie: it butts up against the outer right edge of the iframe).
I can't seem to figure out how to do this - I tried using various different float, positioning and margin setups but the closest I can get is where the "x" is on the right side but its position moves with the window rescaling. I would like for it instead to "stick" to the right edge of the resume and stay there! Is there a way to do this? Here is my code:
HTML:
<header>
<nav></nav>
</header>
<div id="resume-overlay">
<div id="resume">
<iframe src="resume.html"></iframe>
<img class="button" src="img/x-button.png">
</div>
</div>
<div id="portfolio">
</div>
CSS:
header {
height: 80px;
width: 1600px;
position: fixed;
top: 0px;
z-index: 1;
background-color: white;
margin-left: 100px;
}
#resume-overlay {
display: none;
position: fixed;
z-index: 2;
top: 80px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .9);
}
.resume {
position: relative;
max-width: 1600px;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
And my jQuery if needed:
$(function() {
$('#overlay').on('click', function() {
$('#resume-overlay').fadeToggle('fast');
});
$(".button").click(function(event) {
event.preventDefault();
history.back(1);
$('#resume-overlay').fadeToggle('fast');
});
});
To illustrate, I want to move that blue X to the right edge of the white box
I'm not sure they type of error you're seeing yet, but your code here:
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
Is all I think you need to address, try adding
top: 0;
right: 0;
And remove the padding, work with those values to get the button where you want it, and it shouldn't move from those setting regardless of window size.
How do you make a background img that would:
Stretch across the window horizontally
Have a fixed height
Crop height when it's bigger than the content's height (do not shrink)
Currently I have this code that implements #1 and #2 but I can't seem to make it do #3:
<img class="background" src="images/page-background.png"/>
html {
position: relative;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I tried moving the img inside a div with overflow: hidden but that didn't work for some reason:
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
.background-wrap {
position: absolute;
width: 100%;
height: 1000px;
overflow: hidden;
z-index: -1;
}
How would you do this properly in CSS / HTML (without JavaScript)?
You could use a css background-image on a div like so:
.background-wrap {
background: url(images/page-background.png) no-repeat;
background-size: 100% 500px;
}
The background-size specifying that;
Stretch 100% across the window horizontally, and have a 500px fixed height (change this to auto if you want the image height to scale in proportion to the width).
Sorry guys, it turns out I completely forgot to remove a duplicate background <img> that I left after splitting my HTML in multiple files (actually PHP files but that's irrelevant).
For the sake of future reference, the following worked for me:
<html>
<head>...</head>
<body>
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
</body>
</html>
html {
position: relative;
}
.background-wrap {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I have this picture:
and I want this picture:
to be over the picture so I get this "dot-effect".
I also have to repeat the picture so it fits the other one. I managed to have them both in the same place but never to have the second one repeated over the first one.
Please help. I googled this for the past 2 days and couldn't figure it out.
You can use multiple background images
.avatar {
width: 180px;
height: 180px;
background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
background-repeat: repeat, none;
}
<div class="avatar"></div>
or alternatively, an actual image in the HTML and a pseudo-element overlay.
.avatar {
width: 180px;
height: 180px;
position: relative;
}
.avatar::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}
<div class="avatar">
<img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>
Use first image as main background, than use position: absolute and background image on another element to place doted image over first one. Why background image for overlay? It's because you can set background-repeat attribute for background (default to repeat x and y).
.wrapper {
float: left;
position: relative;
}
.overlay {
background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/DSToa.png" />
<div class="overlay"></div>
</div>
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.