0

I'm not really sure how to ask this so bear with me and I'll answer questions as quickly as possible. I want a background that is as wide as a viewer's screen is. I also want a different colored background that is only behind the content of my web page. Basically, I want one that automatically adjusts to the user's screen and another that is always 800 pixels wide. I use HTML or and external CSS style sheets.

4
Contributors
4
Replies
12
Views
7 Years
Discussion Span
Last Post by tezac
4

You use a 'wrapper' or 'container' div for the entire page and then set that to say 800px:

CSS

body{
  background-color: red;
  text-align: center;
}
#wrapper{
 margin: 0 auto;
 width: 800px;
 text-align: left;
 background-color: yellow;
}

HTML

... dtd and head ...
<body>
<div id="wrapper">

... all the content here ...
</div>
</body>
</html>
Votes + Comments
Beat me to it and good example!
0

As Ardav said you can use separate body and wrapper div backgrounds to achieve what you're looking for.

One thing to note (as you mentioned multiple backgrounds I thought I'd bring this up "just in case") is that IE and Firefox (amongst other popular browsers) handle CSS background properties differently from each other.

As an example, in Firefox (and, in fact, in most browsers not IE) you can have 2 backgrounds assigned to one container (body, wrapper, etc) which will allow you to have, for example, a different background for the top, middle and even bottom of your content section of your site. This is achieved by CSS that looks something like:

background-image: url(imgs/bg_top.png),url(imgs/bg_patt.png);
background-repeat: no-repeat,repeat-y;
background-position: top, inherit;

Unfortunately, the use of double variables within a single css parameter is something that IE does not understand and the only way to get a comparable result is by layering divs over top of each other such that your upper background is contained within an upper div, primary background contained within it's own div and so on. All of which can still be portrayed over top of a body primary background.

Hope this helps :)

0

Yep, IE blows. I included the text-align properties for ancient IE versions. Can't wait until IE joins the 21st century. There are so many cool things you can do with CSS - especially CSS3, but IE spoils the party. Webkit, Presto, Gecko - you poor guys. Talk about the bright pupils being disadvantaged 'coz there's a naughty boy in the class.

Sorry, rambling...

-2

Meltiple background is quite new thing, but it's simple to use, you should use the same CSS property background, only one thing you need to know, that a list of backgrounds must be listed and separated by commas, like here: CSS3: multiple backgrounds. For IE with older versions, you need to use PIE.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.