Forum | Appery.io

Hi

I am applying a background image to the header and footer using css. I notice that the image does not cover the entire header or footer. There is a fine white line of about 3px at the top of the header and at the bottom of the footer.

This is my css.

to disable the heading......

.ui-header .ui-title {
display: none;

to display the image....

.header {
background-image: url("../img/header.jpg");
background-repeat: no-repeat;
background-size: cover;
}

Thank you

Hi Deon,

Just follow this step for set images on background.

1. Go to visual builder and click on page ( show in screen shot )

   

2. Uncheck header and footer.

3. Create one external css and try this css

   div#startScreen_mobilecontainer {
   /background-color: #99DEDC;/
   background: url(../img/backimg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }

   where "startScreen" is pagename.

   If you want to set background image to header then use following code

   Remove your css that you implement for your header and try this

   div#startScreen_mobileheader {
   background-image: url('http://www.w3schools.com/css/trolltun...');
   }

   where "startScreen" is pagename.

   Regards

Hi
It does not work. It just removes the header all together. Please note, I am also adding the back button and an image to the header.
So removing the header is not an option.

Hello Deon,

Please check that white line wit ha DOM inspector, it could be a CSS proberty margin, padding or border. Please set them to padding and magrin = 0 and border to "none"

Hi Sergiy
Thank you that worked and what I discovered was that the images I was using had a transparent border as well.