complicated background image positioning for all devices

Question

First of all, I am unable to provide any URL details as I am developing on localhost - for now. However, hopefully, with my clear description below, you may be able to provide a suggestion. :-)

I've been trying to positioning an image in the .header-wrap #header of my Wordpress site using Uplift theme. The code below has worked correctly, but the image goes below the header due to the aspect ratio which means that its height is clearly more than 160px. I have also tried background sizing and background-position - none of these provide the correct outcome. I am aware that I need to introduce media queries, but I need to first of all get this curved image working on large screens.

I'm needing the image to sit directly under the header logo and to be positioned in the site header template so that it is scalable for all devices but adopts the sticky header so the body scrolls underneath the image.

I've provided two screenshots: first screenshot using the below code, which currently falls below the header area, and the other screenshot displays what it should look like on all screens.

The below code would work if the image wasn't so customised to a particular shape.

So, I need the image to stay fixed, so when a user scrolls up or down, the content of the page should scroll under the image.

.header-wrap #header {
background-image: url(http://localhost/lps/wp-
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */

}

preferred layout

The image as it currently stands using code insert

Answer 1

Hi you need media queries to make responsive you image background may be you have to generate different size...

.header-wrap #header {
min-width:100%;
min-height:100%;
height:100%;
width:100%;
position:fixed;
top:0px;
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */

@media all and (max-width: 1080px) {
    .header-wrap #header{ left:-600px;}
}

@media all and (max-width: 980px) {
    .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 800px) {
    .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 768px) {
   .header-wrap #header{ left:-300px;}
}

@media all and (max-width: 750px) {
   .header-wrap #header{ left:-380px;}
}

@media all and (max-width: 640px) {
    .header-wrap #header{ left:-280px;}
}

@media all and (max-width: 360px) {
    .header-wrap #header{ left:-180px;}
}

@media all and (max-width: 320px) {
    .header-wrap #header{ left:-160px;}
}

Now you need to adapt media queries position here for exemple but you have to adapt to the different device here a lot of them...