All geek questions in one place

How to move image in div using CSS?

I have an image located inside a div, I'm trying to move it 50 pixels down and 50 pixels to the left so that everything is complete. But I'm not sure how to edit the image in CSS, since I do not know what code I need to insert to connect the photo to css.

My code is:

#OverviewText4 img:MoneyIcon.png { width: 150px; height: 150px; position: absolute; top: 50px; left: 50px; } 
 <div id="OverviewText4"> <img src="MoneyIcon.png" /> </div>

thanks for the help

+5
source share
8 answers

There are many ways to do this in CSS according to many answers. If I could guess, since the name of the image in your example is connected with iconography of 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/

That way you don’t even need the img tag in HTML, which is desirable if its just a presentation.

This answer also has the assumption that you want the image to appear on top of any content in the OverviewText4 div, and not have a stream of content around the image. If this is not the case, you would like to use the fields and save the position: static or relative image.

+1
source

Remove the image name from the ad and make sure that your container is set to position: relative so that your image is absolutely positioned against the right #OverviewText4 element containing in this instance

 #OverviewText4 { position: relative; } #OverviewText4 img { width: 150px; height: 150px; position: absolute; top: 50px; left: 50px; }
+7
source

You need to add position:relative to the parent <div> , and then add position: absolute; in <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>
+4
source

That's right, your CSS is great, but your selector is not working. I think this is what you are going to do.

 #OverviewText4 img[src="MoneyIcon.png"] { width: 150px; height: 150px; position: absolute; top: 50px; left: 50px; } 
 <div id="OverviewText4"> <img src="MoneyIcon.png" /> </div>

I changed img:MoneyIcon.png (which means nothing CSS) to img[src="MoneyIcon.png"] , which means the img tag, where src = MoneyIcon.png

The main problem here is that if you change src, you should also change your CSS, I would 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.

+3
source

You can just do it with a pad

 #OverviewText4 img { padding:50px 0 0 50px; }
+2
source

If I understand your question correctly, all you have to do is add this style to your div where the image is.

 div > img { margin-top: 50px; margin-left: 50px; }
+1
source

Use the margin attribute to create a margin around an element. You can also use padding in a div element.

Try the following:

 #OverviewText4 img: MoneyIcon.png{ width: 150px; height: 150px; position: absolute; margin-top: 50px; margin-left: 50px; }
+1
source

You can associate an image with a CSS class by adding the class name inside the <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>
+1
source

Source: https://habr.com/ru/post/1260815/

More articles:


All Articles