CODEWITHSUNDEEP
htmlcss
Sid
Sid

Reputation: 113

How to move image in div with CSS?

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

Upvotes: 9

Views: 118505

Answers (8)

elmarko
elmarko

Reputation: 923

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;
}

Upvotes: 13

weinde
weinde

Reputation: 1146

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;
}

Upvotes: 1

AndFisher
AndFisher

Reputation: 643

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.

Upvotes: 3

Andrew Bone
Andrew Bone

Reputation: 7291

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.

Upvotes: 3

Sebastian Kaczmarek
Sebastian Kaczmarek

Reputation: 8515

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>

Upvotes: 4

user7234396
user7234396

Reputation:

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>

Upvotes: 1

ggradnig
ggradnig

Reputation: 14169

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;
}

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

You can simpy do this with padding

#OverviewText4 img {
  padding:50px 0 0 50px;
}

Upvotes: 2

Related Questions