Background Issue

[louckster]

Hello everyone,

I’m working on a theme and for the content area I have a background. However the background is so high in pixels. When content is pushed passedd the background the color I set the background to be isn’t showing up.

URL is: http://loucksdesign.net/sessions/xhtmlcss/exercise6

The CSS used is the following (all the basic areas of content):

Code:

#contentMain {
background: url(../images/theme-bg-content.jpg) no-repeat;
height: 557px;
width: 960px;
}

#contentLeft {
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#contentRight {
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

You can tell where the background gets cut off. I want the blue color of the background graphic to show. I only wanted the shade part way – hence why the background graphic. Any help would be great.

[JRGould]

you haven’t set a background color – your css reads:

Code:

background: url(../images/theme-bg-content.jpg) no-repeat;

you can specify a background color like this

Code:

background:#f00 url(../images/theme-bg-content.jpg) no-repeat;

the only problem is that you’re going to get the same abrupt cutoff – what you need to do is leave that declaration the same and then give #contentLeft & #contentRight the desired background color

[louckster]

Well even i set the contentMain to just a solid color it still doesnt fill anything.

Code:

#contentMain {
background: #e2f2f9;
width: 960px;
}

#contentLeft {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#contentRight {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

I need the background to be the color.

[davesgonebananas]

Not sure what the problem is exactly. Could you be more specific as every appears to be working ok when I view the site.

[louckster]

The background behind the left/right content needs to be a solid a color but it’s not showing a solid color. The same color has the left/right content divs. It’s not showing up no matter what I do.

WHAT IT SHOULD LIKE: http://loucksdesign.net/images/version2.png

WHAT IT DOES LOOK LIKE: http://loucksdesign.net/sessions/xhtmlcss/exercise6/

MY CODE

Code:

#contentMain {
background: #e2f2f9 url(../images/theme-bg-content.jpg) no-repeat;
height: 557px;
width: 960px;
}

#contentLeft {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#contentRight {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

[JRGould]

wrap the right and left divs in a #wrap div – and give that the desired bkg color – make sure to add a margin to the outside of that so that you can see the background of #mainContent

[louckster]

I already have a wrapper ….

Code:

#wrapper {
width: 940px;
margin: 0 auto;
}

#header {
background: url(../images/theme-bg-header.jpg) no-repeat 0 0;
height: 137px;
width: 940px;
}

#logo {
display: inline;
float: left;
margin: 40px 0 0 20px;
position: relative;
width: 433px;
}

#logo span {
background: url(../images/theme-logo.png) no-repeat 0 0;
height: 100%;
position: absolute;
width: 100%;
}

#contentMain {
background: #e2f2f9 url(../images/theme-bg-content.jpg) no-repeat;
height: 557px;
width: 960px;
}

#contentLeft {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#contentRight {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#footer {
background: #2a7d9c url(../images/theme-bg-footer.jpg) repeat-x;
height: 131px;

}

#footerContent {
background: url(../images/theme-bg-footer-content.jpg);
width: 940px;
height: 130px;
}

#footerLeft {
float: left;
margin: 10px;
padding: 0 0 0 10px;
width: 300px;
}

So I can make another one?

[davesgonebananas]

The contentMain wrap has a height:557px so is stopping half way down your content. Wrap the contentLeft and contentRight in another wrap.

[louckster]

I added a new wrap but it’s still not doing anything for the background.

Code:

#contentWrapper {
background: #e2f2f9;
margin: 0 auto;
width: 940px;

}

This is how i have it on the page. Its after the "MainContent".

Code:

[ikthius]

you background colour….. is it supposed to be a certain colour for the whole page? or just in a certain div?

if it is to be like a background colour that will be the main colour when your 1px wide image finishes, then put your background colour on your body part of the css…… by the way not checked your code, just having a rest from coding myself just now

EDIT put your div class clear a bit earlier:

Code:

Test

instead of:

Code:

Test

but you have a strange dark blue thing going on, but at least you get your background colour

[louckster]

http://loucksdesign.net/sessions/xhtmlcss/exercise6/

As you see … the color goes on the outside where the "shadow" is. I don’t want that. I need to get that blue color inside of that so that it flows with the rest of the text.

[ikthius]

"louckster" wrote:

http://loucksdesign.net/sessions/xhtmlcss/exercise6/

As you see … the color goes on the outside where the "shadow" is. I don’t want that. I need to get that blue color inside of that so that it flows with the rest of the text.

that was not your original question……
but I think having your height is causing the problem, add in overflow:hidden or some sort of overflow.
also add a border to your area you want to make sure your doing it right, (just a hint when things are not going your way, it can help show you what your div is actually doing

[JRGould]

You need to take the background COLOR off of #contentMain – wrap #contentLeft & #contnentRight in a new div and give that the background color plus a margin (left & right) to push it off of the shadow background. The bg color is as wide as the shadow because it is the bg color of the box that is containing the shadow.

You really need to make an attempt to understand what is going on in your html and css, what the layout of the divs looks like, etc. because that would make these issues of questions really start to make sense to you – try installing web developer’s toolbar in firefox and use the "display element information" – or just get the XRAY bookmarklet ( http://www.westciv.com/xray/ )

[Soh Tanaka]

I didn’t read all of the posts above so if I’m misunderstanding something please forgive me….

You want both left and right column to have a solid background color, but your saying the background colors won’t show up. Lets take a look at your code here…

Code:

#contentWrapper {
background: #e2f2f9;
margin: 0 0 0 10px;
width: 940px;
}
#contentLeft {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

#contentRight {
background: #e2f2f9;
float: left;
margin: 10px 0 0 10px;
padding: 0 0 10px 10px;
width: 450px;
}

If you notice, all of your background colors are the same ( #e2f2f9;). Isn’t this the reason why it looks like its not doing anything? I tried changing it to "color: red;" and seemed to work for me.

Again, if Im misunderstanding the issue here, sorry!

[Author]

Posts