Jump to content
Stef's Coding Community
Sign in to follow this  
Aspire

Is this possible?

Recommended Posts

I would like to set up a page background that is textured (small square gif that repeats over the whole page) and a top band (narrow strip of pattern and gradient gif that is repeat-x.

 

Can I have both on the same page background? If so, can you please tell me how to set it up. I can get one or the other but not both at the same time. Thanks.

Share this post


Link to post
Share on other sites

I don't think you can do both at the same time. You could try adding one to the <body> and one to the <html> but I believe I've had cross-browser issues with that in the past. Probably your best bet is to have one background image on the <body> and to add a wrapper div with a background for the top band.

Share this post


Link to post
Share on other sites

Well, it didn't work. Only the page_bg band is showing. If I switch the images in the styles, only the body_bg background shows. Could you possibly have a look at this code and see if you can spot the problem?

 

body {

background: url(body_bg.jpg);

background-position: left top;

background-repeat: repeat-x;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-color: #666767;

}

html {

background: url(page_bg.png) center top repeat;

}

...............................

In the html document, I have <html> <head> </head>

<body>

<div id="wrapper">

<div id="container">

<div id="header">

</div>

etc.

Thanks so much.

Share this post


Link to post
Share on other sites

Is it uploaded somewhere? It's always best to see the entire thing.

Share this post


Link to post
Share on other sites

Do you have any content on the page? If not - put some in.

Share this post


Link to post
Share on other sites

Is it uploaded somewhere? It's always best to see the entire thing.

Unfortunately I can't. It's for a private intranet. In the end I will just leave the page background and forget the band, but it frustrates me that I can't see where my mistake is. Not to worry, and thanks for your quick response.

Share this post


Link to post
Share on other sites

Try again with the html and body backgrounds. I use that method and haven't had a cross-browser problem that Ben referred to.

 

html { background: url(page_bg.png); }/*small square*/
body { background: url(body_bg.jpg) top left repeat-x; } /*top band*/

 

The small square that is to cover the whole window must be for the html tag. The top band will repeat horizontally without repeating vertically (only as high as the image) and the small squares should show underneath.

 

Your code won't wok because you have

 

body {
background: url(body_bg.jpg);
background-position: left top;
background-repeat: repeat-x; 

 

When you use background-position and or background-repeat you must use background-image first not just background.

 

This makes no sense:-

html {
background: url(page_bg.png) center top repeat;

 

There's no need to say repeat because that's the default. Center is wrong if you want it to cover the whole page. Just code pnly the background as the rest should default over the whole window. I would code the html image before the body style in the CSS.

Edited by Wickham

Share this post


Link to post
Share on other sites

Good points, Wickham - I missed that 'minor' detail....

Share this post


Link to post
Share on other sites

in general, you can pick some tips on how to code looking into the source code of the websites you like. Especially if there are cross-browsers problems involved.

For example, this website code is written to help us "curious" through.

Also, if code "doesnt work", check your page in different browsers (you havent mention what browser you use to test your page) and use conditional comments for IE versions, if necessary.

Share this post


Link to post
Share on other sites

Wickham, thanks for analyzing the styles and pointing out what wasn't working. That is exactly the kind of critique I was hoping for so I can learn from my mistakes.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...