Need advice on have to code this bacground (pic. inc.)

Question

wonderland 0 Junior Poster

13 Years Ago

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.

web-design

Edited 13 Years Ago by wonderland because: n/a

3 Contributors
15 Replies
111 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by wonderland

All 15 Replies

Lusiphur 185 Practically a Posting Shark

13 Years Ago

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.

Lusiphur 185 Practically a Posting Shark

13 Years Ago

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 :)

Edited 13 Years Ago by Lusiphur because: n/a

macgurl70 9 Junior Poster

13 Years Ago

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>

macgurl70 9 Junior Poster

13 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

wonderland 0 Junior Poster · Answer 1 · 2010-07-09T02:01:39+00:00

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 ?

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 2 · 2010-07-09T02:13:24+00:00

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 :)

wonderland 0 Junior Poster · Answer 3 · 2010-07-09T22:15:07+00:00

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 :)

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 4 · 2010-07-11T01:19:00+00:00

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). :)

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 5 · 2010-07-11T01:43:47+00:00

Haha! Been there done that (with my own site) but... no harm no foul! :)

wonderland 0 Junior Poster · Answer 6 · 2010-07-11T14:11:21+00:00

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 ! :)

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 7 · 2010-07-11T14:15:33+00:00

Glad to help :) Please don't forget to mark the thread as solved if this issue has been resolved.

wonderland 0 Junior Poster · Answer 8 · 2010-07-11T21:00:15+00:00

I will start coding this again tomorrow, then I will surely mark it :)

wonderland 0 Junior Poster · Answer 9 · 2010-07-11T21:52:08+00:00

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 ?>

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 10 · 2010-07-12T00:44:56+00:00

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).

wonderland 0 Junior Poster · Answer 11 · 2010-07-12T01:28:06+00:00

I solved this last problem. I added height:100 %.

I'm very thankful for all your help! :) I'm marking this thread as solved.

Need advice on have to code this bacground (pic. inc.)

Recommended Answers Collapse Answers

All 15 Replies

Recommended Answers