0

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

PySerial Killer
  • 428
  • 1
  • 9
  • 26
Felicia
  • 1

1 Answers1

0

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...

  • Thanks for your input Headmax. I knew that I needed to create media queries, but first of all, I need to get the image to fit in the header then I'll have a play with media queries. Unfortunately, with your suggestions, the image still does not fit into the header area. :-( – Felicia Sep 05 '17 at 03:39
  • Actually @headmax giving this more thought, would a border-radius work for the mid to back part of the image and then position the front part of the image to the bottom left of the header? Perhaps the border would accommodate the curve somehow? I'm not sure how I would lay this out and it would need to work for all devices too. – Felicia Sep 05 '17 at 07:44
  • Hi Felicia, in this way you got a background image on position fixed that mean you need to adapt you image using left top bottom right in all of part of css .header-wrap #header{ here } you can add to body tag as a div child of body but take care cos if you add size on that div you that will no stretch for the way of width:100% or width:auto respect the responsive image. put your example or live page to show you problem. Regards. –  Sep 05 '17 at 09:25
  • Hello @headmax. I don't understand your explanation, however, I am downloading flywheel so I can share what I have so far. Once I've done this, I'll provide a virtual URL. Thanks.. Standby.. – Felicia Sep 06 '17 at 06:51
  • hi @Felicia flywheel first time for me do not what you can do with this, i hope that will help you, good luck for your project. Regards –  Sep 06 '17 at 12:14