Member Avatar for mariko

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
  • 107 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by tezac
Member Avatar for diafol

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>
commented: Beat me to it and good example! +1
Member Avatar for Lusiphur

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 :)

Member Avatar for diafol

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...

Member Avatar for tezac

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.