x-repeating background images not fully expanding

Question

I've spent hours now trying different things to figure out how to get 2 background images in css to expand the full width of the page.

The site is here: http://res-intel.com

I know that having a width defined in #main won't let it expand. However I can't think of a solution. I would think the body one should work!!! What can I do?

Thank you so much!

The relevant CSS code is:

body {
background-image:url('http://res-intel.com/images/headerbg.jpg') repeat-x top right;
margin:auto;
padding:0;
text-align: center;
font-family:arial;
}

#main {
background: url('http://res-intel.com/images/contentbg.jpg');
background-repeat:repeat-x;
width:904px; 
text-align:left;
}

Image doesn't exist. http://res-intel.com/images/headerbg.jpg. Also checkout background-size: cover; — Christopher Marshall, Jun 17 '14 at 21:52
headerbg.jpg is not found..Ah person above me beat me by 10 secs — , Jun 17 '14 at 21:52
and you cant use `background-image:url('http://res-intel.com/images/headerbg.jpg') repeat-x top right;` like that, fix it to `background:` — Tobiasz, Jun 18 '14 at 06:50

score 0 · Answer 1 · answered Jun 18 '14 at 06:47

You have syntax error. You can't add repeat-x and position properties for background-image. You need to use like background instead of background-image. Update your CSS like below.

 body {
  background:url('http://res-intel.com/images/headerbg.jpg') repeat-x top right;
  margin:auto;
  padding:0;
  text-align: center;
  font-family:arial;
 }

x-repeating background images not fully expanding

1 Answers1