0

I'm trying to keep an image in place, relative to the width and height of the screen, without distorting the image. I'm new to HTML and CSS and looking around online, which I've done, I cant seem to come up with a solution that helps me.

This is what the website looks like currently

.background .top img {
  width: 350px;
  height: auto;
  display: block;
  margin: 7% 40vw 0 40vw;
  position: fixed;
}
<link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
<div class="background">
  <div class="top">
    <img src="https://i.gyazo.com/6b4879127e032e75fbd44521893576e3.png" alt="Panda">
  </div>
  <div class="bottom">
    <p>Hi, Im <span>James</span>.</p>
  </div>
</div>

I want it to stay hanging over the black part like it is already, no matter the change in height or width of the screen

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
James Andrew
  • 197
  • 1
  • 4
  • 16
  • Isnt that what I did? – James Andrew Jan 17 '19 at 17:04
  • share your HTML and anything else.. have you tried seeing what it looks like as it is already when you shrink the screen size? – Julian Silvestri Jan 17 '19 at 17:05
  • Try using a snippet or code pen to share your example so that we can see the problem when the screen size changes.. users on stack overflow are generally lazy and want to do as little leg work as possible – Julian Silvestri Jan 17 '19 at 17:07
  • I have tried seeing what it looks like when I shrink the screen size, the image doesnt stay in the center of the screen, as if the margins dont exist some how, and if I use codepen I cant keep my local image which is the problem here – James Andrew Jan 17 '19 at 17:09
  • I included all my html – James Andrew Jan 17 '19 at 17:11
  • Have you tried to see what happens when you change the screen size? Are you able to share that – Julian Silvestri Jan 17 '19 at 17:13
  • Just change `40vw` to `auto` and it will center automatically. – Paulie_D Jan 17 '19 at 17:13
  • I dont want it to center, I want it to center horizontally not vertically – James Andrew Jan 17 '19 at 17:30
  • https://gyazo.com/1b5c0b1944e5566063ffaa18519342b5 this is what happens when I change the screen – James Andrew Jan 17 '19 at 17:32
  • There is a similar question here https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window so you can try this https://jsfiddle.net/nazimboudeffa/j6kwtgxa/ with your example – nazimboudeffa Jan 17 '19 at 18:16
  • The solution there was to attempt to centre it and cover the entire screen, I dont want to do either of those things. I want to only centre it horizontally. Also, trying your solution did this for me... https://gyazo.com/9341cd7a23b24cdb8bcdffec1098f08c – James Andrew Jan 17 '19 at 18:26

1 Answers1

0

Just set width property in percentage and that's it.

Kim Ber
  • 69
  • 11