Backgrounds In CSS: Everything You Need To Know

Advertisement

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!).

Working With Backgrounds in CSS 2

Overview

We have five main background properties to use in CSS 2. They are as follows:

  • background-color: specifies the solid color to fill the background with.
  • background-image: calls an image for the background.
  • background-position: specifies where to place the image in the element’s background.
  • background-repeat: determines whether the image is tiled.
  • background-attachment: determines whether the image scrolls with the page.

These properties can all be merged into one short-hand property: background. One important thing to note is that the background accounts for the contents of the element, including the padding and border. It does not include an element’s margin. This works as it should in Firefox, Safari and Opera, and now in IE8. But in IE7 and IE6 the background does not include the border, as illustrated below.


Background does not extend to the borders in IE7 and IE6.

Basic Properties

Background color
The background-color property fills the background with a solid color. There are a number of ways to specify the color. The follow commands all have the same output:

background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;

The background-color property can also be set to transparent, which makes any elements underneath it visible instead.

Background image
The background-image property allows you to specify an image to be displayed in the background. This can be used in conjunction with background-color, so if your image is not tiled, then any space that the image doesn’t cover will be set to the background color. Again, the code is very simple. Just remember that the path is relative to the style sheet. So, in the following snippet, the image is in the same directory as the style sheet:

background-image: url(image.jpg);

But if the image was in a sub-folder named images, then it would be:

background-image: url(images/image.jpg);

Background repeat
By default, when you set an image, the image is repeated both horizontally and vertically until the entire element is filled. This may be what you want, but sometimes you want an image to be displayed only once or to be tiled in only one direction. The possible values (and their results) are as follows:

background-repeat: repeat; 	/* The default value. Will tile the image in both directions. */
background-repeat: no-repeat; 	/* No tiling. The image will be used only once. */
background-repeat: repeat-x; 	/* Tiles horizontally (i.e. along the x-axis) */
background-repeat: repeat-y; 	/* Tiles vertically (i.e. along the y-axis) */
background-repeat: inherit;	/* Uses the same background-repeat property of the element's parent. */

Background position
The background-position property controls where a background image is located in an element. The trick with background-position is that you are actually specifying where the top-left corner of the image will be positioned, relative to the top-left corner of the element.

In the examples below, we have set a background image and are using the background-position property to control it. We have also set background-repeat to no-repeat. The measurements are all in pixels. The first digit is the x-axis position (horizontal) and the second is the y-axis position (vertical).

/* Example 1: default. */
background-position: 0 0;	/* i.e. Top-left corner of element. */

/* Example 2: move the image to the right. */
background-position: 75px 0;

/* Example 3: move the image to the left. */
background-position: -75px 0;

/* Example 4: move the image down. */
background-position: 0 100px;


The image can be set to any position you like.

The background-position property also works with other values, keywords and percentages, which can be useful, especially when an element’s size is not set in pixels.

The keywords are self-explanatory. For the x-axis:

  • left
  • center
  • right

And for the y-axis:

  • top
  • center
  • bottom

Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so:

background-position: top right;

Percentage values are similar. The thing to remember here is that when you specify a percentage, the browser sets the part of the image at that percentage to align with that percentage of the element. This makes more sense in an example. Let’s say you specify the following:

background-position: 100% 50%;

This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.


The smiley face is aligned as it would be if it was set to right center.

Background attachment
The background-attachment property determines what happens to an image when the user scrolls the page. The three available properties are scroll, fixed and inherit. Inherit simply tells the element to follow the background-attachment property of its parent.

To understand background-attachment properly, we need to first think of how the page and view port interact. The view port is the section of your browser that displays the Web page (think of it like your browser but without all the toolbars). The view port is set in its position and never moves.

When you scroll down a Web page, the view port does not move. Instead, the content of the page scrolls upward. This makes it seem as if the view port is scrolling down the page. Now, when we set background-attachment:scroll;, we are telling the background that when the element scrolls, the background must scroll with it. In simpler terms, the background sticks to the element. This is the default setting for background-attachment.

Let’s see an example to make it clearer:

background-image: url(test-image.jpg);

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;


As we scroll down the page, the background scrolls up until it disappears.

But when we set the background-attachment to fixed, we are telling the browser that when the user scrolls down the page, the background should stay fixed where it is — i.e. not scroll with the content.

Let’s illustrate this with another example:

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;


We have scrolled down the page here, but the image remains visible.

The important thing to note however is that the background image only appears in areas where its parent element reaches. Even though the image is positioned relative to the view port, it will not appear if it’s parent element is not visible. This can be shown with another example. In this one, we have aligned the image to the bottom-left of the view port. But only the area of the image inside the element is visible.

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;


Part of the image has been cut off because it begins outside of the element.

The Background Shorthand Property
Instead of writing out all of these rules each time, we can combine them into a single rule. It takes the following format:

background: <color> <image> <position> <attachment> <repeat>

For example, the following rules…

background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;

… could be combined into the following single line:

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

And you don’t have to specify every value. If you leave a property out, its default value is used instead. For example, the line above has the same output as:

background: url(image.jpg) 50% 0 repeat-y;

Common Uses Of Backgrounds

Aside from their obvious use of making elements more attractive, backgrounds can be used for other purposes.

Faux Columns

When using the CSS property of float to position layout elements, ensuring that two (or more) columns are the same length can be difficult. If the lengths are different, then the background of one of the columns will be shorter than the background of the other, spoiling your design.

Faux columns is a very simple background trick that was first written up on A List Apart. The idea is simple: instead of applying a separate background for each column, apply one background image to the parent element of the columns with that image containing the designs for each column.

Text Replacement

Our choice of fonts on the Web is very limited. We could get custom fonts by using tools such as sIFR, but they require users to have JavaScript enabled. An easier solution that works on any browser is to create an image of the text in the font you want and use it as the background instead. This way, the text still appears in the markup for search engines and screen readers, but browsers will show your preferred font.

For example, your HTML markup could look like this:

<h3 class="blogroll">Blogroll</h3>

If we have a 200 by 75 pixel image of this text in a nicer font, then we could display that instead using the CSS as follows:

h3.blogroll {
	width: 200px;
	height: 75px;	/* So that the element will show the whole image. */
	background:url(blogroll-text.jpg) 0 0 no-repeat;	/* Sets the background image */
	text-indent: -9999px;	/* Hides the regular text by moving it 9999 pixels to the left */
	}

Easier Bullet Points

Bullet in an unordered list can look clunky. Instead of dealing with all of the different list-style properties, we can simply hide the bullets and replace them with a background image. Because the image can be anything you like, the bullets will look much nicer.

Here, we turn a regular unordered list into one with sleek bullets:

ul {
	list-style: none; /* Removes default bullets. */
	}

ul li {
	padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
	background: url(bulletpoint.jpg) 0 0 no-repeat;
	}

Backgrounds in CSS 3

CSS 3 has many changes in store for backgrounds. The most obvious is the option for multiple background images, but it also comes with four new properties as well as adjustments to current properties.

Multiple Background Images

In CSS 3, you will be able to use more than one image for the background of an element. The code is the same as CSS 2, except you would separate images with a comma. The first declared image is positioned at the top of the element, with subsequent images “layered” beneath it, like so:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

New Property: Background Clip

This brings us back to the issue discussed at the beginning of this article, about backgrounds being shown beneath the border. This is described as the “background painting area.”

The background-clip property was created to give you more control over where backgrounds are displayed. The possible values are:

  • background-clip: border-box;
    backgrounds displayed beneath the border.
  • background-clip: padding-box;
    backgrounds displayed beneath the padding, not the border.
  • background-clip: content-box;
    backgrounds displayed only beneath content, not border or padding.
  • background-clip: no-clip;
    the default value, same as border-box.

New Property: Background Origin

This is used in conjunction with background-position. You can have the background-position calculated from the border, padding or content boxes (like background-clip).

  • background-origin: border-box;
    background-position is calculated from the border.
  • background-origin: padding-box;
    background-position is calculated from the padding box.
  • background-origin: content-box;
    background-position is calculated from the content.

A good explanation of the differences between background-clip and background-origin is available on CSS3.info.

New Property: Background Size

The background-size property is used to resize your background image. There are a number of possible values:

  • background-size: contain;
    scales down image to fit element (maintaining pixel aspect ratio).
  • background-size: cover;
    expands image to fill element (maintaining pixel aspect ratio).
  • background-size: 100px 100px;
    scales image to the sizes indicated.
  • background-size: 50% 100%;
    scales image to the sizes indicated. Percentages are relative to the size of containing element.

You can read up on some examples of special cases on the CSS 3 specifications website.

New Property: Background Break

In CSS 3, elements can be split into separate boxes (e.g. to make an inline element span across several lines). The background-break property controls how the background is shown across the different boxes.

The possible values are:

  • Background-break: continuous;: the default value. Treats the boxes as if no space is between them (i.e. as if they are all in one box, with the background image applied to that).
  • Background-break: bounding-box;: takes the space between boxes into account.
  • Background-break: each-box;: treats each box in the element separately and re-draws the background individually for each one.

Changes to Background Color

The background-color property has a slight enhancement in CSS 3. In addition to specifying the background color, you can specify a “fall-back color” that is used if the bottom-layer background image of the element cannot be used.

This is done by adding a forward slash before the fall-back color, like so

background-color: green / blue;

In this example, the background color would be green. However, if the bottom-most background image cannot be used, then blue would be shown instead of green. If you do not specify a color before the slash, then it is assumed to be transparent.

Changes to Background Repeat

When an image is repeated in CSS 2, it is often cut off at the end of the element. CSS 3 introduces two new properties to fix this:

  • space: an equal amount of space is applied between the image tiles until they fill the element.
  • round: the image is scaled down until the tiles fit the element.

An example of background-repeat: space; is available on the CSS 3 specifications website.

Changes to Background Attachment

The background-attachment has a new possible value: local. This comes into play with elements that can scroll (i.e. are set to overflow: scroll;). When background-attachment is set to scroll, the background image will not scroll when the element’s content is scrolled.

With background-attachment:local now, the background scrolls when the element’s content is scrolled.

Conclusion

To sum up, there is a lot to know about backgrounds in CSS. But once you wrap your head around it, the techniques and naming conventions all make good sense and it quickly becomes second nature.

If you’re new to CSS, just keep practicing and you’ll get the hang of backgrounds fast enough. If you’re a seasoned pro, I hope you’re looking forward to CSS 3 as much as I am!

(al)

↑ Back to top

Michael Martin writes about Web design, WordPress and coding at Pro Blog Design. You can subscribe there for advice on making the most of your blog's design, or follow him on Twitter.

  1. 1

    Nice article. I thought it was somewhat rudimentary in the beginning, but there’s nothing wrong with covering the basics again.

    Also the info. about CSS3 is very nice. Thanks for the write up!

    0
  2. 2

    Everything I needed to know, indeed…thanks!

    0
  3. 3

    Thanks!

    0
  4. 4

    Amazing Article

    0
  5. 5

    I’m very excited with the new features of CSS3. Thanks, good intro.

    0
  6. 6
  7. 7

    Nice thanks folks!
    What about full-screen/page scalable background images in css?

    0
  8. 8

    Although initially a little basic, there’s some useful information about what to expect with CSS3. Thanks!

    0
  9. 9

    I assume multiple background images in CSS 3 will be handled like normal background images, in that you can specify the image and the position, so you could essentially create an expanding div with a background image for each corner (though this could be handled by border-radius) by defining

    background: url(topleft.jpg) top left, url(topright.jpg) top right, url(bottomleft.jpg) bottom left, url(bottomright).jpg bottom right

    What happens with background repeat in this instance?

    0
  10. 10

    Great article!!

    0
  11. 11

    background-position is one rule that is the only way to set two separate values with no standardized way to set them individually. this makes cascading a pain in the butt for things like sprites.

    they aren’t standards, but they should be… IE actually got this right
    background-position-x:
    background-position-y:

    0
  12. 12

    Be very careful when using backgrounds for text replacement, especially if you have an SEO department. Apparently even if the text is physically there in the code, Google and the other engines can tell you are hiding it and won’t weigh it as high as normal plain text.
    Image replacement for text (including SiFR and other methods) have led to many internal debates at my workplace.

    0
  13. 13

    Great article, very useful and I like that it started off at the basics, made it easier to build up to the newer advanced stuff.

    0
  14. 14

    What is the ruling on the use of ‘ in background-image?
    IE,
    background-image: url(test-image.jpg);
    vs
    background-image: url(‘test-image.jpg’);

    I normally go with the first, but I know the examples at W3C include the ‘.

    0
  15. 15

    Nice article!

    But the question is: In the section “Text replacement”, isn’t it better to wrap the text with a -tag and set the “display” to none? I’ve read a few forum posts and some articles about this, but have never got a real confirmation about how the spiders of the search engines read this. Any ideas or links?

    0
  16. 16

    god, what a beginner post.
    the most interessting thing is about backgrounds and css3.

    the rest is for housewifes. and u can read it on selfhtml -.-

    -5
  17. 17

    @Patrik – I’ve always thought the opposite. I thought if you needed to display image based font or logo, it’s better to set a text-indent off screen, say -9999px. I think all content inside an element with display:none is also invisible to search engine spiders. Like you though, I don’t know if one is better than the other for SEO, yet I know Apple uses the text indent for their logo…

    0
  18. 18

    @Aaron: Try this, “Create a Dynamically-resizing Background Image Using CSS” – works a treat.

    0
  19. 19

    This blog post from Dave Shea explains Google’s view of image replacement techniques:

    Image Replacement + Google

    Image replacement with text-indent applied to remove the text is perfectly legitimate as long as their is no deception intended.

    0
  20. 20

    Great Job.!

    0
  21. 21

    «What happens with background repeat in this instance?»

    You may use this:
    background:
    url(../images/img1.png) 0 0 repeat-x,
    url(../images/img2.png) 0 100% repeat-x

    Multiple backgrounds is my number one background feature in my css3 wish list (background-clip in №2 and background-opacity is № 3).

    1
  22. 22

    Your background shorthand property is a little out of order. You need to swap repeat and position.

    It should be:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    My way of remembering this property is “c-i-r-a-p.” If you try to pronounce it, the word sounds like “syrup.”

    Thanks for the good info.

    0
  23. 23

    Excellent article. Thanks for the info about background properties in CSS3.

    0
  24. 24

    I’ve been trying to keep up with CSS3 a little, but my job doesn’t really allow me to get excited and experiment as much as I like. Unfortunately big name brands are not interested in removing IE6 from their preferred browser list.

    I’m mostly interested in the background-break property in CSS3. I had no idea something like that was there. Thanks for the information!

    0
  25. 25

    Nice article. I wasn’t aware of some of the CSS3 background properties. I especially like the new options with background repeat. I remember seeing the same type of thing going on between Macs and PCs several years ago. The tiled desktop wallpaper on a PC would always start in the upper left corner and clip whatever was left over. The tiled wallpapers on a mac would always center themselves both horizontally and vertically.

    0
  26. 26

    @Patrick & Brett – Using the -9999px indent is better, but mainly for usability purposes. If you use display: none, screen readers will also ignore the text, which is normally a bad thing.
    For SEO, no image replacement technique at all (plain text), is the best way to go. I would especially avoid it on header tags.

    0
  27. 27

    IE actually gets something right when it comes to background properties: background-position-x and background-position-y.

    This lets you change just the x or y value of the background-position which can come in handy like in the following example http://www.russellheimlich.com/blog/ie-gets-a-css-rule-right/

    I wish the other browsers would pick this up.

    0
  28. 28

    If you need to apply multiple backgrounds, you can target the ‘html’ tag, yes the tag before head, and then apply your second background to your body tag

    0
  29. 29

    How to use two or more background Images to Same Element (e.g div) in CSS2

    0
  30. 30

    hi smashing guys,
    your text replacement methos doesn’t seem to be bullet proof, my method is this one:

    .text-replace {
    height: 0;
    overflow: hidden; /*Now th text is hidden*/
    padding-top: 32px; /*Height of the image*/
    background: url(image.jpg) no-repeat;
    }

    0
  31. 31

    I’m replacing the h1-tag in my sites often with the logo of the customer. Now the problem I got is, that if I print the page I don’t see the logo anymore.

    Has anyone an idea how to print the background-image of an h1-tag?

    0
  32. 32

    Nice post and I do try to skip over the CSS3 bits because every time I catch a glimpse I think “Whoa that is SO useful!”…and then realise IE6 will be a thorn in my side for a number of years to come :*-(

    0
  33. 33

    @Andris: just put it in the screen media style!

    0
  34. 34

    @Andris: just put it in the print media style!

    0
  35. 35

    wow I read all of them and… I learn nothing LOL just kidding..

    btw why your blog title gone??

    0
  36. 36

    Welcome back!:)

    0
  37. 37

    body {
    color:#666;
    background:#45484d url(../images/style1/bg_main.jpg) repeat-x 0 0;
    }
    a{
    color:#c9171a;

    In this code for example, whats the meaning of 0 0; after repeat-x ?

    0
  38. 38

    I still think we need a way to clip the background but specifying x, y, w, h for that. Adding to that multiple backgrounds, would definitely helps us to expand the css sprite technique.

    Good article.

    0
  39. 39

    great overview on background property. Though i personally didn’t understood much of css3 parameters of background but .. they look interesting and cool !
    thanks again

    0
  40. 40

    I tought that background-clip will be something like the clip property in CSS 2.1.

    I would like to have icon sprite with many icons, but in one element with some content I just want to display only one icon from that sprite on the background. I still need to add into that element another one that will have fixed dimensions like the icon.

    0
  41. 41

    background-position has always been somewhat confusing to me. this article does not clear this up for me. the values are defined as
    “background-position: x-axis y-axis”.

    if x-axis is “left, center, right” and y-axis is ‘top, center, bottom’, then is “background-position: top right;” valid as specified above in the article when values should be defined in x-axis, y-axis order? or does the order of the words not matter? you always see the values set up this way, you don’t tend to see “right top”

    Al

    0
  42. 42

    must be bookmarked ;)

    0
  43. 43
  44. 44
  45. 45

    Great and well-rounded article. I wish some of the folks who are pointing out that everything here is “obvious” or “easy” would remember that they once had to learn everything from scratch, themselves.

    1
  46. 46

    That was a cool and very informative Post. Specially for CSS3. Many thanks ! :)

    0
  47. 47

    Isn’t CSS3 sooo 2025?

    I really, really hope Opera gets full support for CSS3 soon. I have stopped caring about developing my personal sights for IE, I just want to embrace CSS3 to its full extent. :’3

    0
  48. 48

    Good article.
    It’s nice to cover the basics again and I really liked the CSS3 part.

    0
  49. 49

    Initially I thought “hmmm that´s for noobs” when in fact you have pulled together a really great cheat-sheet kind of resource. Good Stuff!

    0
  50. 50

    For anyone using the Easier Bullet Points technique described, please note:

    (1) With background-position: 0 0, you will need to add space in the image itself if your graphic is shorter than the intended line-height and you want it vertically centered. you could try background-position: left center, but, on multiline list items, the bullet will align with the vertical center of the entire <li>, not the first line.

    (2) For some browsers, increasing font size will not scale the images, and it’s possible to get some large text with a tiny bullet hanging out near the upper left of the first character.
    (3) You may run into difficulty if you float:left a <div> or <img> right before your <ul>; the padding-left: 40px and the bulletpoint.jpg will end up behind the float and can be obscured entirely. The solution that we use for regular bullets (where ul li {list-style-type: disc;}) involves removing padding-left, and setting position:relative; left:40px; margin-right:40px…but that doesn’t work with Easier Bullet Points (suggestions welcome!).

    On another note: for anyone wrestling with putting little graphics next to their inline links with the background property, perhaps using a cool CSS selector like explained at http://www.psyked.co.uk/css/auto-matic-link-icons.htm, the IE challenges and workarounds are explained well at http://www.satzansatz.de/cssd/wrappinglinkbg.html.

    0
  51. 51

    I was going to make the point Al did, Comment 41.

    From the article during background-position discussion:

    Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so:
    1. background-position: top right;

    Isn’t that y-axis, x-axis?

    0
  52. 52

    For the text replacement, I like more using padding-top set to the height of the image. It makes more sense to me, at least aesthetically.

    Say you have a h1 and want to replace with image1.png is 300x250px:

    h1 {
    height : 0 ; /* the padding-top value will use the height */
    width: 300px ;
    padding: 250px 0 0 0 ; /* here... */
    overflow: hidden ; /* and avoid the text to be displayed */
    background : ulr(image1.png) top left no-repeat ;
    }

    This also works specially well for links. I learned this one from the Plone stylesheets for the logo (tho Plone uses an inline image now for the logo).

    0
  53. 53

    Oh my, jex (#30) had showed that one before! Sorry for the duplicate.

    0
  54. 54

    Going to rethink the text-indent: -999px font replacement method. You think you know it all… Good article

    0
  55. 55

    great article! thanks

    0
  56. 56

    Nice & thanks a lot.

    0
  57. 57

    any one can help!!

    i made a bodypan in css including border and background-color and in that bodypan i inserted two more pan right and left. the problem is that the bodypan doesnot shows the background color and border too..

    0
  58. 58

    Just as AL said (Post 41) “Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so:

    background-position: top right; ”

    I’m i missing something here. Isn’t “top” the Y value and “right” the x value???????

    0
  59. 59
  60. 60

    Really appreciate the thoroughness, from the very basic elements to the tips, tricks and current innovations.

    Would like to see something about how I could choose to load the background images before any other content? Or to have greater control of when each image loads?

    0
  61. 61

    thank you for making this post
    This post is very useful for me who was just learning about css
    i have bookmarked this one.

    0
  62. 62

    Arvind Balasubramaniam

    August 30, 2010 9:38 am

    I believe you may have mixed up the order in the line:
    “Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so:
    background-position: top right;”
    Top is a y-axis value whereas right is an x-axis value.
    Perhaps you meant- background-position must follow a format of “x-axis y-axis” if percentage(or absolute) values are specified.

    0
  63. 63

    Great tutorial! Thanks for sharing.

    0
  64. 64

    This information is very good,long but good

    0
  65. 65

    The bullet point technique was very useful and background-position was a new one to me. I’m using it on my site. I going to continue playing with it to see what else I can do.

    Thanks for the help!!

    0
  66. 66

    I am trying to repeat-y at multiple y locations. Is this possible?

    I have a 1px image that repeats at 220px on the y axis

    “background: url(images/seperator2.gif) 220px repeat-y;”

    How can i make this image also repeat at 440px on the y axis?

    0
  67. 67

    Msaleem Danish

    May 17, 2012 5:58 am

    As the monitor resolution and internet speed is advancing, it seems like more and more designers use over-sized photo or illustrated image as the website’s background. Large background image can create the stunning visual effect, especially for high resolution monitors. It can also add more life to your site design compared to the traditional tiled background graphic. Here is a collection of 80 websites that used large image as the site background (must-see, you won’t be disappointed).

    http://www.handycss.com/tips/working-with-css-backgrounds/

    0
  68. 68

    Wow – great review and overview. I think many of us know most of these tips, but very few know all of them. Great resource – saved for reference.

    0
  69. 69

    within few lines, you covered a whole textbook . Trying to implement it here but I am still struggling. http://www.oceancatalogue.co.uk/ Great presentation.

    0
  70. 70

    I am writing my first, very simple HTML5, CSS3 responsive site. I am stuck on something so basic, that I can’t find the information in any tutorial or reference! I felt too silly to ask, but have now discovered that a friend, more experienced with (old-style) sites that myself, has faced exactly the same issue in switching to HTML5 and the use of .

    I want one background color for the whole screen, and one for the div wrapper containing the whole actual page. On the page, within that div wrapper, I have a header, then two articles side by side, one set to an id and one to a class. The problem is that, no matter what I tweak, the articles show the background color set for the whole window, and ignore the one set for the containing div wrapper. But the weird thing is, all of the actual page obeys the instructions for max width and color set on that same div.

    What is going on?

    My friend has resorted to setting a background image, and given up on background color, but this is not recommended practice. What is the best solution?

    0
  71. 71

    Yes… that’s a little mistake in the article.

    0
  72. 72

    Then why are you reading it? Its bad karma to insult your peers. I worked with dudes like you and everyone could not wait for you to get canned. Just constructive criticism.

    4

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top