CODEWITHSUNDEEP
css
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25755

browser does not fill the background properly with repeat-x

in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?

the css for this i am using is.

#header {
    height: 111px;
    background: url('../img/header-bg.jpg') repeat-x;
    width: 100%;
}

let me know if you want more code ill host it in jsfiddle. thank you.

i have hosted my site in http://iarmar.com/test/bn just in case you want to test.

Upvotes: 0

Views: 4679

Answers (3)

Baluga
Baluga

Reputation: 1

See this www.viralment.com oh its says 30 at least try using these:

background-image: url("gradient_bg.png");
background-repeat: repeat-x;

Upvotes: 0

Kyle
Kyle

Reputation: 67194

As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.

Upvotes: 1

Jeaf Gilbert
Jeaf Gilbert

Reputation: 11991

Set min-width: 1040px; to your #header

Upvotes: 5

Related Questions