How to move image in div with CSS?


Tags: html,css

Problem :

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



Solution :

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.


    CSS Howto..

    How can I center two images side-by-side with Bootstrap 3?

    How do you make a nav bar “sticky”?

    How to set negative z-index with jQuery?

    How to add spacing in between
    [duplicate]

    How to Remove - Modify btn-inverse Top Border

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How can i give transparency effect in CSS?

    How would I call :parent for this tooltip?

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How can i center the list items inside my unordered list?

    How can I reload css styles when change windows width?

    How to edit HTML with CSS? [closed]

    How to Javascript to load a css file only for one specific page?

    How to add padding to a reapeating CSS background without padding the content?

    How to make CSS drawn character responsive inside bootstrap column

    How can I include an element within a div without using html?

    How to edit css for jquery datepicker prev/next buttons?

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How do I center my content inside the menu?

    How to include css font in Firefox and internet explorer?

    How can I line up my CSS DIVs

    how do I align my error message with Simple_form for Ruby on Rails?

    How to encapsulate CSS, especially for popups and no iframe involved?

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to make image hover in css?

    How to create the Facebook Status arrowed textbox?

    How to change the images using HTML and CSS? [closed]

    How to add a Delay on Bootstrap Dropdown Hover