How to keep one image on a certain part of a responsive background image, as the webpage resizes?-CodePudding

For example, if I have a background image of a cyclone and it's responsive/resizes with the window and covers the whole web page (background-size: cover), but the eye of the cyclone isn't in the center of the webpage but say slightly more to the right and I wanted another image, say a picture of an apple, to always cover the eye of the cyclone, no matter what size the window is, what could I do?

I've tried playing around with the margin percentages, the image of the apple is also responsive and shrinks with the background image to cover the eye of the cyclone but the images always tend to move out of sync just before I've dragged the window to it's smallest size.

CodePudding user response：

To make the apple image cover the eye of the cyclone no matter the size of the web page, you can use the position property in CSS to position the apple image absolutely relative to the cyclone image. Then, you can use the left and top properties to adjust the position of the apple image so that it always covers the eye of the cyclone.

Here is an example of how you might do this:

/* The cyclone image is the background image for the body element */
body {
  background-image: url('cyclone.jpg');
  background-size: cover;
  background-position: center;
}

/* The apple image is positioned absolutely relative to the body element */
#apple {
  position: absolute;
  left: 25%;  /* Adjust this value to position the apple horizontally */
  top: 10%;   /* Adjust this value to position the apple vertically */
}

You will need to experiment with the values of the left and top properties to find the right position for the apple image so that it covers the eye of the cyclone. These values will depend on the size and position of the cyclone image and the size of the apple image.

Note: If you want the apple image to remain centered on the eye of the cyclone as the web page is resized, you will need to use media queries to adjust the left and top values for different screen sizes.

CodePudding user response：

The CSS background size property can have value of cover. The cover value tells the browser to automatically and proportionally scale the background images width and height so that they are always equal to or greater than the viewports width/height.

CodePudding user response：

Check the Multiple Backgrounds CSS feature which will achieve your request:

CodePudding user response：

In Img tag use height i and width in pixel then change in CSS then output will show properly