Hi,
I can't figure out how to make this background friendly for various resolutions. I would like wave pattern to continiue on larger resolutions, while content is in the center of the page.
[IMG]http://i52.photobucket.com/albums/g9/Rydra/kapieni-bg.jpg[/IMG]
Will be thankful for every suggestion.
I would handle it in the following way:
For your CSS stylesheet -
#bodyBG {
margin-top: 0;
background-repeat: repeat-x;
background-image: url(imgs/bg_patt.png);
}
#Content {
width:800px;
margin-left:auto;
margin-right:auto;
padding: 0 0 0 0;
}For your page -
<style type="text/css">
<!--
@import url("resStyles.css");
-->
</style>
<body id="bodyBG">
<div id="Content">
--Your Centered Content Goes Here
</div>
</body>You can play with adding an additional background-image and background-repeat: repeat-y; to have a secondary background of sorts that will tile downwards with the length of your content inside the #Content class if you like as well.
The above code sample will basically tile horizontally your wave background while setting up a secondary div container of 800px width that 'floats' horizontally centered on the page depending on the width of the inside of the browser window displaying it.
Hope this helps :) Please mark as solved if this resolves your issue.
Thank you for you reply! I will try this tommorow.
One more thing just popped into my head - how can I tile this image so that footer section(light gray area at the bottom of image) continues as well, if I have a text with more height than height of this image ?
Easiest way to do that... is to add a new DIV.
Make the new Div your tiled wave background and set the background color of your body to match the color you want to 'extend' below the wave tile.
CSS:
#BodyBG {
margin-top: 0;
background-color: #CCC;
}
#BG {
margin-top: 0;
background-repeat: repeat-x;
background-image: url(imgs/bg_patt.png);
}
#Content {
width:800px;
margin-left:auto;
margin-right:auto;
padding: 0 0 0 0;
}Page:
<style type="text/css">
<!--
@import url("resStyles.css");
-->
</style>
<body id="bodyBG">
<div id="BG">
<div id="Content">
--Your Centered Content Goes Here
</div>
</div>
</body>Of course you need to change your import statement to match the name and location of your .css file and the background image URL to match your background tile.
The above should set your body background to #CCC which is a grey variant (set to whatever grey matches the bottom of your tile), set your first DIV to give your tiled background horizontally and set your second DIV to position your content cenrally on the page.
Hope this helps :)
Thanks. Using you suggestions I've thrown I quick version which illustrates problem I was concerned about. Click here to see
The red box exceeds the height of the image and therefore goes over it, but I wan't bottom waves at the bottom of page. Basically I want the white part of the background push the bottom waves to bottom of the site. For example, if I have a really long text bottom waves should be below that text.
I hope I made this clear :)
Hmm... if you want the repeating waves at the bottom of the page always, you could try adding "background-position:bottom;" to the #BG id in your CSS file. This should push the background (tiling horizontally) to the bottom of the DIV, in which case your #BodyBG background-color should likely be #000 (black) to match the top of the wave tiles.
Edit: just a design note, you may want to trim a bit off the left or right of your wave tile to match the lines up a bit :)
I really like Lusiphur's suggestion of the repeating background, keeps the site from looking too choppy.
Also, looked at your image - you have the header and footer in one image file. Doing this will always have the bottom wave underneath the text since it would be part of the body background file.
I recoded a bit (practicing my coding - have to do some for work and this site has been very helpful with giving me excellent practice and ideas).
I have uploaded the idea (very very rough - but an idea) here and posted the code below.
CSS
#bodyBG {
margin-top: 0;
background-color:#FFFFFF;
background-image:url(TopWave2.gif);
background-position:top;
background-repeat:repeat-x;
}
#header {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
width:100%;
height:200px;
text-align:center;
vertical-align:middle;
padding-top:15px;
}
#content {
width:800px;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
position:relative;
top:0px;
background-color:#95CAFF;
height:500px;
padding:10px;
}
#footer {
width:110%;
height:100%
position:absolute;
bottom:-20px;
left:-20px;
background-position:bottom;
}
#wave {
background-image:url(BottomWave.gif);
background-position:bottom;
background-repeat:repeat-x;
position:relative;
bottom:-20px;
left:-20px;
height:90px;
}Html Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIA "Kāpieni 96"</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="bodyBG">
<div id="header">The page header would be here</div>
<div id="content">This section would have the main content for the site</div>
<div id="footer"><div id="wave"></div></div>
</body>
</html>I really like Lusiphur's suggestion of the repeating background, keeps the site from looking too choppy.
Also, looked at your image - you have the header and footer in one image file. Doing this will always have the bottom wave underneath the text since it would be part of the body background file.
I recoded a bit (practicing my coding - have to do some for work and this site has been very helpful with giving me excellent practice and ideas).
I have uploaded the idea (very very rough - but an idea) here and posted the code below.
CSS
#bodyBG { margin-top: 0; background-color:#FFFFFF; background-image:url(TopWave2.gif); background-position:top; background-repeat:repeat-x; } #header { font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:16px; font-weight:bold; width:100%; height:200px; text-align:center; vertical-align:middle; padding-top:15px; } #content { width:800px; margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; position:relative; top:0px; background-color:#95CAFF; height:500px; padding:10px; } #footer { width:110%; height:100% position:absolute; bottom:-20px; left:-20px; background-position:bottom; } #wave { background-image:url(BottomWave.gif); background-position:bottom; background-repeat:repeat-x; position:relative; bottom:-20px; left:-20px; height:90px; }Html Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SIA "Kāpieni 96"</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="bodyBG"> <div id="header">The page header would be here</div> <div id="content">This section would have the main content for the site</div> <div id="footer"><div id="wave"></div></div> </body> </html>
This is some excellent work there macgurl, and darnit this site just won't let me give you more rep til I give more to other people (as soon as I find posts worth giving it to lol) but there's just one problem with the sample you linked... I'm not seeing the footer at all (in Firefox). :)
lol thanks and no worries - I just found the site last week and the info/practice has REALLY been a huge help.
As for the footer - it may have helped if I had uploaded the image >.>;; oops
The image is there now.
Haha! Been there done that (with my own site) but... no harm no foul! :)
I would like to thank you very much, both of you ! This would have probably taken me many hours to figure out by myself, but thanks to you I'll be able to do this without headaches ! :)
Thank you again ! :)
Glad to help :) Please don't forget to mark the thread as solved if this issue has been resolved.
I will start coding this again tomorrow, then I will surely mark it :)
Just one last thing. It's about #content. There is a height:500px; value. Is it possible that div content determines it's height automatically based on the amount of text inside of it ?>
Just one last thing. It's about #content. There is a height:500px; value. Is it possible that div content determines it's height automatically based on the amount of text inside of it ?>
To be honest you can almost consider that height value to be a "max-height" value because a div's height is determined by the amount of content it contains(with the exception of "absolute" positioned divs).
I solved this last problem. I added height:100 %.
I'm very thankful for all your help! :) I'm marking this thread as solved.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.