CODEWITHSUNDEEP
htmlcss
Slavko Kulik
Slavko Kulik

Reputation: 3

Banner in html and css width

I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.

Here is my CSS code with banner:

#banner{
    background-image: url(mats/banner.jpg);
    width: 100%;
    height: 470px;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    display: block;        
}

I have tried everything but nothing successful.

Upvotes: 0

Views: 8055

Answers (2)

S.Sreeram
S.Sreeram

Reputation: 225

It is background-size.

background-size: 100%;

On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss. Better applying this property on images with width > 1200px

If the height: 470px is also intended as background height, dont use it. Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched

Upvotes: 1

maque
maque

Reputation: 686

I think you might missing background-size

 #banner{
        background-image: url(mats/banner.jpg);
        background-size: 100%;
        width: 100%;
        height: 470px;
        background-repeat: no-repeat;
        position: relative;
        background-position: center;
        display: block;

}

Upvotes: 0

Related Questions