CODEWITHSUNDEEP
htmlcss
Simon.
Simon.

Reputation: 1896

How can I remove border in background image?

I have a background image on a div. It appears to have a small gray border around it that i don't desire for this site. I've tried to set the border & margin values to 0 but to no success. How can I remove this border?

enter image description here

CSS:

#back{
   position: absolute;
   width: 100%;
   height: 90%;
   bottom:0;
   background: url("back_i.png")no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

HTML:

<div id="head">
       <ul>
            <li id="home">Home</li>
            <li id="about">About</li>
            <li id="audio">Audio</li>
            <li id="contact">Contact</li>
       </ul>
 </div>
 <div id="back">
       <div id="content">
                 //
       </div>
 </div>

Upvotes: 1

Views: 1032

Answers (1)

Durwasa Chakraborty
Durwasa Chakraborty

Reputation: 374

I don't have enough credits so couldn't comment but even I would have suggestedbackground-position: -1px margin-top: -5px and I am sure it would work without re-sizing your background image. However, when I first came across this concept of negative margin, I did some reading. Hope it helps.

The laws of the screen and desktop icons and the visible screen layout and the necessary actions that we can perform like click drag drop etc are governed by the Fitts's Law. According to the Fitts's Law the edges of a visible screen is called as infinity (if you push your mouse in any direction the pointer will stop at the edge and so relatively infinite) in the same analogy a part of the screen which is not visible is termed as negative, and the screen available is positive. So, a negative value or margin means to pull the element in that direction beyond the visible screen frame.

[Fitts' Law] (https://www.interaction-design.org/encyclopedia/fitts_law.html)

Upvotes: 2

Related Questions