Background stretch and multiple background

HTML & CSS
1

Hello there
How can we place multiple background? I tried the w3school way but didn’t work out. Also I would like to know how the backgound image can be stretched to fit any resolution like in twitter.com.
Thanks in advance.

2

You will have to be more specific as the question is quite ambiguous.

If you are talking about the cloud image in twitter then its just a large image that can be repeated as required. There’s no stretching as such.

You can stretch background images with background-size in css3 capable browsers and also use [URL=“http://www.css3.info/preview/multiple-backgrounds/”]multiple background images on the same element but you will need to [URL=“http://caniuse.com/”]check support.

We’ll need to know more abut what you want to help any more :slight_smile:

3

Not the cloud of the twitter.com. I was talking about the bg-image in the homepage of twitter.com. I have a code as


#bgwrap{
	background: url(../img/bg1.jpg) no-repeat 0px 0px;
	background-size: cover;
	min-width: 960px;
	max-height: 700px;
}

The background-size:cover; was good enough but as I zoom out the image remains as such. Wouldn’t it be better if the bg-image also dropped in size(but yes proportionately with other elements :slight_smile: )
PS: The image size is 1600x1020

4

Hi,

“Cover” will ensure the image always covers the available space but even if you zoom out the background is still 100% wide so it can’t really do anything more than it does already without some of the image going missing. You’d need to set a width or a max-width to enable the zoom to work properly.


#bgwrap{
	background: url(../img/bg1.jpg) no-repeat 0px 0px;
	background-size: cover;
	min-width: 960px;
	max-height: 700px;
        [B]max-width:1260px;[/B]
}
5

I got a problem by setting the max-width:1260px; coz in a resolution of 1366 the background-image is placed at one side(left) while zooming out. I found that while using multiple background with the shorthand “background”, I wasn’t able to set the color for each background. Is there any reason or am I wrong in that?

6

Ain’t shorthand wonderful? The background shorthand applies default values for those that are not specified. Background-color is one of them. Assuming that you want the same color behind all the background images, you can either apply the background images using the “longhand” method (so no default background-color is applied), OR apply the longhand “background-color:#hex” as the last item in the cascade of "background:"s, OR just apply a background color in each of the shorthands.

7

That got me. Thanks to both. I was able to set multiple background with color as the background. Lastly which site would you recommend to edit the lines online so that in future I can be able to show what’s going on with me.
Cheers :drink: