CODEWITHSUNDEEP
javascripthtmlcss
user1108948
user1108948

Reputation:

Full banner width over the screen

I have a banner that uses an image as the background. The image's size is 670*303. Is there a way to stretch the banner(image) to full width of the screen.

Demo is at http://jsfiddle.net/zhshqzyc/xGQtF/2/

And also, there is extra color(background-color: #808000)

color

below the banner, how to remove it?

Thanks.

Upvotes: 1

Views: 757

Answers (2)

Dom
Dom

Reputation: 2325

If its a gradient or pattern that can be repeated you can use 

background-repeat:repeat-x;

or just insert 'repeat-x' into your background css like 

background:url(images/blah.jpeg) repeat-x;

That way you only need a small chunk of the image>smaller image sizes>quicker loading time.

to get rid of the color it is showing with the image you can use 

background-color:transparent;

Also if, as I suspect, you wish to make the banner stretch seamlessly from one side to the other, be sure to set the body style with 

padding:0px;
width:100%;

and use

margin:0px;
width:100%;

on the div containing the background.

Although it may stretch to the full width without setting the body padding to 0px, some browsers automatically give the body padding if it isn't set so it will counteract those that do.

If you're using an image that has curved edges and vertices etc this won't be right for you, you just want to stretch it (which personally I think wont look nice on 99% of detailed images) you can use:

background-size:100%;

Hope I've helped =)

Upvotes: 0

abhshkdz
abhshkdz

Reputation: 6365

background-size: 100% should do the trick.

Here, http://jsfiddle.net/xGQtF/6/

Upvotes: 2

Related Questions