Need help in CSS (creating two backgrounds)

@webstersSep 04.2008

Hi guys,

My CSS skill is very limited, I hope to get som advice from anyone of you who could help.

I’ll paste the css code which has the background that works as desired:
The second background which I wanted to accomplish is the entire background with gradient color. When I tried to embed with another image file it’ll overlap bank.png and the rest also. It works only if I applied normal color as in “~~[B]~~#D08504[/B] “.
Anyone could help?
Thanks in advance.

body {
margin: 0px;
padding: 0px;
background: ~~[B]~~#D08504[/B] url(images/back.png) repeat-y center top;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #3399FF;
}

a {
font-weight: bold;
text-decoration: none;
color: #33CCFF;
}

a:hover {
text-decoration: underline;
color: #33CCFF;
}

to post a comment

CSS

30 Comments(s) _↴

@ray326Sep 04.2008 — #An element can have only one background image and one background color. If you really need a double background you'll have to overlay the body with a div.

@webstersauthorSep 04.2008 — #An element can have only one background image and one background color. If you really need a double background you'll have to overlay the body with a div.[/QUOTE]

Hello ray236,

Thanks for your prompt reply.

Could you teach me how to overlay the body with a div?

Do I need to create a new function? If yes, then where do I invoke the function name to?

Thanks for guiding.

@ray326Sep 04.2008 — #You just put a full div inside the body and put your content in that.

<body>

<div>

<p>Boy, we're cookin' with gas now!</p>

</div>

</body>

@webstersauthorSep 04.2008 — #You just put a full div inside the body and put your content in that.

<body>

<div>

<p>Boy, we're cookin' with gas now!</p>

</div>

</body>[/QUOTE]

Mmm... I think that's not exactly what I mean.

Perhaps by looking at the actual would give better picture of it.

You could download it from http://dec2hex.googlepages.com/test.rar

[I]I've edited this page for this query purpose[/I]

In the index.html you would see back.png which is the right background that is declared in the body at stylesheet.

And my query was the entire orange background (#D08504), I want this to be gradient color, I thought I have to create a image for this gradient background, but how could I integrate them together?

Sorry for the long message. I hope I could express clearly for your advice.

Thanks.

@CentauriSep 05.2008 — #Bit difficult to extract the files when they have a password on them..

@webstersauthorSep 05.2008 — #Sorry, I wrote the last thread pretty late about 5am ?

I must have forgotten to include the rar pass.

The pass is test.

Thanks for the help.

Mmm... I think that's not exactly what I mean.

Perhaps by looking at the actual would give better picture of it.

You could download it from http://dec2hex.googlepages.com/test.rar

[I]I've edited this page for this query purpose[/I]

In the index.html you would see back.png which is the right background that is declared in the body at stylesheet.

And my query was the entire orange background (#D08504), I want this to be gradient color, I thought I have to create a image for this gradient background, but how could I integrate them together?

Sorry for the long message. I hope I could express clearly for your advice.

Thanks.[/QUOTE]

@webstersauthorSep 05.2008 — #In my work place I use 19" LCD.

I tried to view it there, and to my shock that the footer was overlapped by back.png.

Anyone could help to address this issue?

@CentauriSep 05.2008 — #As you already have a wrapping element #content, the back.png can be applied here, and then the gradient can be used on the body :

[CODE]body {
 margin: 0px;
 padding: 0px;
 text-align: justify;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #333333;
 [COLOR="Red"]background: #D08504 url(images/gradient.png) repeat-x;[/COLOR]
 }
 
 #content {
 width: 770px;
 margin: 0px auto;
 padding: 20px 0px 0px 0px;
 [COLOR="Red"]background-image: url(images/back.png);
 overflow: hidden;[/COLOR]
 }[/CODE]

The overflow setting is to force the div to surround the floats.

@webstersauthorSep 05.2008 — #Centauri,

Wow.. it is enlightening.. it seems to work now, and not ovelapped, but there is some edges and white lines (not known where it came from) that is displayed, probably the size of that i created the gradient as 1024x768 (initial attempt)?

Learned from some guides to create gradient background, they use 120x5px, I'll try to do it by tomorrow, and then use the modified code, I'll pose for any issue (if there is).

On the question relating to display disalignment of the wrapping content with bigger monitor screen, my home laptop is 15" wxga, and it displays fine, but with 19" LCD monitor in office, it became out of shape after the footer, mm.. do u spot any mistake somewhere?

How do we assure irregardless of monitor size the website always display as intended?

Again sorry for long message. =)

@CentauriSep 06.2008 — #What do you mean by "it became out of shape after the footer" ?

@webstersauthorSep 06.2008 — #What do you mean by "it became out of shape after the footer" ?[/QUOTE]

Before even applying the modified quote which you advised.

I was viewing it with my office computer with 19" LCD; I shouldn't have described it as out of shape (pardon me). But, the background color (#D08504) is pulled lower in the 19" screen, hence the footer (the id in the style sheet) where the word "Copyright © 2008 L I S." is, has white background and supposedly to touch the end of the screen, but it is somewhat dangle as the background (#D08504) below it. However, in my 15.4" WXGA, I can see it normally with no flaw. Perhaps there's a way to make the footer to always touch the end of the screen so that irregardless of screen monitor size this does not affected.

@c0rrupt0Sep 06.2008 — #the size of your monitor really has no bearing at all on how a webpage is displayed. However, the resolution you are using will. So, what screen resolution are you using on the 19" monitor.

@CentauriSep 06.2008 — #As it is now, thare is nothing to tell your footer to stay at the bottom of the screen - it just follows the two side columns, the height of which will be determined by the content.

To make the footer appear at the bottom for small content, and follow the content if it is more than screen height, you need a "minimum 100% height layout", which is reasonably easy to achieve with your html.

First, you need to set both html and body to 100% height to provide the height reference, so at the top of your css file add:

[CODE]html, body {
 height: 100%;
 }[/CODE]

Next we need to make #content be at least 100% high, but if that is specified, the top padding will be added. So therefore, remove the top padding from #content, and we will add that the the columns instead. As IE6 does not understand min-height, it can be fed the actual height whilst restoring the overflow setting via a star-html hack :

[CODE]#content {
 width: 770px;
 margin: 0px auto;
 padding: [COLOR="Red"]0[/COLOR];
 background-image: url(images/back.png);
 overflow: hidden;
 [COLOR="Red"]min-height: 100%;[/COLOR]
 }
 [COLOR="Red"]* html #content {
 height: 100%;
 overflow: visible;
 }[/COLOR][/CODE]

All this will then place the footer off the bottom of the screen. If we then apply a negative top margin equal to its total height (including padding and border), this will pull it back up into view :

[CODE]#footer {
 width: 770px;
 height: 110px;
 margin: [COLOR="Red"]-115px auto 0[/COLOR];
 border-top: 1px solid #666666;
 background: url(images/back-footer.png) repeat-y center top;
 font-size: 9px;
 text-align: center;
 padding: 2px;
 color: #333333;
 [COLOR="Red"]position: relative;[/COLOR]
 }[/CODE]

To avoid the footer covering any of the content, the two columns can get padding on the bottom of them equal to the footer height plus any gap you want :

[CODE]#left {
 float: left;
 width: 480px;
 padding: [COLOR="Red"]20px[/COLOR] 20px [COLOR="Red"]120px[/COLOR] 20px;
 }
 
 #right {
 float: right;
 width: 210px;
 padding: [COLOR="Red"]20px[/COLOR] 20px [COLOR="Red"]120px[/COLOR] 20px;
 color: #99CCFF;
 }[/CODE]

@webstersauthorSep 06.2008 — #the size of your monitor really has no bearing at all on how a webpage is displayed. However, the resolution you are using will. So, what screen resolution are you using on the 19" monitor.[/QUOTE]

The resolution of my home pc screen is 1280x800. I don't remember the resolution in my office's pc, but I knew I set it to the maximum, which is definitely larger resolution than my home pc; 1600 or above by (not sure the range..).

@webstersauthorSep 06.2008 — #I have applied the code off your last guide, I could only test it on Mon when back to office ?

Btw, I am done with the gradient background.

I guess a little touch up for the background on this one should make it perfect. ?

Please download test1.rar (same extraction pass):

http://dec2hex.googlepages.com/test1.rar

It's the tiny border coming out, I tried putting width on the body's id, but it has no effect ?

I think my color matching is really bad, before I decided on the current one, it took me a while, seriously. But still feel not too right somewhere, mm.. Do you have any suggestion on the color tone base on this page? I may not apply it but I would certainly highly consider it. ?

@CentauriSep 06.2008 — #What do you mean by "tiny border"? - do you mean the orange border either side of the content? (this is due to the content [B]and[/B] its background being 770px wide, while the distance between the dark gradients on the body background is 780px).

Also, in the code I gave above, keep the html,body {} style separate to the body css - you only want the height to be common, and definitely not the background.

@webstersauthorSep 06.2008 — #That's right the orange thing. Oh now I see, the gradient was the factor, so now I have got the gradient 770px ? It is perfect now.

Thanks for noting to place html, body {height: 100%} at the top, misunderstood earlier.

I attached the updated one here:

http://dec2hex.googlepages.com/test2.rar

At the footer, there is vertical black lines on each side, is it possible to remove it?

@CentauriSep 06.2008 — #The vertical black lines are your footer background image....

@webstersauthorSep 06.2008 — #ow... lol... silly me.. haha (just blown into laughter). Got it corrected immediately. ?

All I want to say, well done Centauri.

You've been so helpful and I got it all ok now.

I'll continue working on the web...

Once again thanks a bunch, you've enlightened so much..

Keep in touch bro ?

@webstersauthorSep 08.2008 — #@ Centauri,

I need your advice to adjust the resolution of the web page.

What should I do to change to 1024x768 resolution?

I tried changing all the width to 1024, but it turned to be very messy.

Hope to hear from you soon.

Thanks in advance.

@CentauriSep 08.2008 — #With that layout, to change widths you would also have to redo the graphics to suit. If you want a fluid width layout, then quite a different approach is needed.

@webstersauthorSep 08.2008 — #That's right, I discovered it by accident. What is an ideal width for a website these days? I read on some discussions, 1024x768. But It looks a little too big when I see it (puzzled).

I'm interested for the fluid width layout, but does it mean to redo from scratch? :s

@CentauriSep 09.2008 — #There isn't really an "ideal" width as there are so many different screen sizes and resolutions on different devices in common use these days. Some stats would suggest that 1024x768 is a common resolution, and for that your website would not want to be more than 1000px or so wide (to account for scrollbar) - but then users on lower resolutions will need to horizontally scroll to see the page fully. Also, not everyone has their browser window maximised.

Fluid layouts require a lot more forethought to plan out what elements are to do what for different widths. Graphics in particular will need to be configured in different ways to allow for "sliding doors" techniques or cropping. Converting a fixed width site to a fluid one could be very difficult, and it may be easier to start from scratch with a different perspective.

@WebJoelSep 09.2008 — #You can always just use a background image on each of;

html {....}

body {....}

Because "body" is child of "html", you might use gradient for html, and positioned image for "body" and still have "background-image" free & available for container, wrapper, etc..

Not sure if this is of any help though (I have not tested any code from this thread)

@webstersauthorSep 09.2008 — #@ Centauri,

I wouldn't agree less, I will need to enlarge the resolution, and it should smaller than 1000px as advised.

Least knowledge on fluid layout, and I don't think I'd plan to start it from scratch at least as of now, so I'll put fluid layout on hold rather.

Thanks again =)

@webstersauthorSep 09.2008 — #You can always just use a background image on each of;

html {....}

body {....}

Because "body" is child of "html", you might use gradient for html, and positioned image for "body" and still have "background-image" free & available for container, wrapper, etc..

Not sure if this is of any help though (I have not tested any code from this thread)[/QUOTE]

Thanks mod for the advice, it's an added info. Currently I'd work on the existing code as posted of the style sheet in this thread, just need to resize the images as to resize the resolution.

@webstersauthorSep 14.2008 — #Hi Centauri,

I have a question:

I'd like to shift the text that is in the black column (css id #right), which has the words "What's New", in fact i have embed a flash movie 283px by 250px, I couldn't make it aligned properly. Perhaps explanation plus the actual would give better understanding. Please download the file here: http://dec2hex.googlepages.com/test3.rar extract with test.

Hope to hear from you soon.

Thanks a bunch.

@webstersauthorSep 14.2008 — #Just another question, I'd like to give some space at the most top of the browser so that the banner will be under it, perhaps a tiny little space would be nice.

I saw it from the site from one member, for easy explanation, I hope tizbo1423 wouldn't mind me pasting the link here, I'll remove the link if not approriate. (http://www.thetsicompany.net/siteV2/).

Hope to get some advice.

Thanks.

@CentauriSep 14.2008 — #Mathematics required...

The dark right hand band of the background image is 255px wide, and that defines the visual size of the right column. However, you want your flash movie to be 283px wide, which doesn't work visually for starters. The #right div is set to 273px wide (narrower than the movie within) plus 43px of side padding for a total width of 316px. The #left div is 600px wide with 40px of side padding for a total of 640px. The total widths of #left and #right is 956px - too wide to fit in the 900px wide #content div, so the right column will have to drop below #left to find room.

If you want the right column to be wider to accept the flash movie, then the extra width will need to be subtracted from #left, and the background graphic changed accordingly.

A top margin can be added to #content to space it down from the top a bit.

@webstersauthorSep 14.2008 — #You're indeed good in explaining. Very crystal clear.

Thanks, and I understood more now. ?

Also in #CSS _↴

Font embedding - Microsoft WEFT css relative positioning help with IE?Centering My List

Success!

Help @websters spread the word by sharing this article on Twitter...

Tweet This

Need help in CSS (creating two backgrounds)

30 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Need help in CSS (creating two backgrounds)

30 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

30 Comments(s) _↴

Also in #CSS _↴