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>
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
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>
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'm trying to add a frame design to a div like the example below :
Gold frame div design
I tried doing this with background image but doesn't work like I want it to because it has to be responsive. Now I'm trying to do this with (:before & :after) but the images won't appear. Am I leaving a line of code behind or something? Help appreciated!
Problem : Picture of problem
//HTML
<div class="second-section">
<div class="container">
<div class="purp-box">
<h1>Welcome to my site!</h1>
<p>Some text goes here.</p>
</div>
</div>
//CSS
.purp-box {
height: 303px;
background: url(../images/box-background.png);
}
.purp-box:after,
.purp-box:before {
content: '';
position: absolute;
top: 0;
}
.purp-box:before {
width: 67px;
height: 303px;
background: url(../images/purp-left-border.png) no-repeat;
right: 100%;
}
.purp-box:after {
width: 67px;
height: 303px;
background: url(../images/purp-right-border.png) no-repeat;
left: 100%;
}
I figured it out, all I had to do was add (box-sizing: border-box;) & (position: relative;) to the main div. Thank you for suggesting image-border as well.
.purp-box {
height: 303px;
background: url(../images/box-background.png);
box-sizing: border-box;
position: relative;
}
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.