how do i set a background image to my div

Q

qkrghkahr

New Member
I'm trying to set two different backgrounds for my body. I have the body divided into two sections with the div. I have the headArea and contentArea. I applied the bg to headArea but when I tried doing the same to contentArea, it didn't work. Nothing happened. Here's my HTML and CSS. Thanks in advance!

Also, how would i go about not having any spaces around my page. I want my
design to hug the whole screen.

http://i.imgur.com/bdwPd.png

------------------------------------------------------------------------
HTML

<!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>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>

<body>


<div id="bannerArea">

</div>




<div id="contentArea">

</div>



</body>
</html>


------------------------------------------------------

CSS:



@charset "UTF-8";


body{ background: #588F27;

}



html {


}

#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(banner.gif) no-repeat;
background-position: center;
}
#contentArea {width:100%; margin-top:325px; padding:0px; background: url(bodybg.jpg) repeat-x;}
 
Edge

Edge

Member
your content area has no height set and you need to set padding: 0 and margin: 0 on body to remove spaces
 
Q

qkrghkahr

New Member
oh thanks! Also, I pushed the contentArea down by adding margin-top:325px
because it looked like contentArea was under the headArea. Am I going at it the right way or is there another way to achieve the same goal? Again thanks! :D
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Adding a 325 pixel top margin sounds odd. My guess is the "banner area" [element] does not contain any children/content and therefore has no height. Once you add content to the banner, this should eliminate the need to add such a large margin.

Second, there is no need to declare a width of 100% in your CSS rules. This is a default/inherit style of the div tag in static position. You can remove those properties.
 
Q

qkrghkahr

New Member
So I did as you asked but there is still space on the sides.

Also, I got the bg to work but there is a weird line at the edge of the bg.
I tried a small fraction of the bg and repeated the x and got like 10 of the weird lines.

http://imgur.com/rq7XY

css:
@charset "UTF-8";


body{ background: #588F27; margin: 0px; padding: 0px;

}



html {


}

#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(banner.gif) no-repeat;
background-position: center;
}
#contentArea {width:100%; height: 600px; margin: 0px; padding:0px; background: url(bodybg.jpg) no-repeat;}





Instead, i made one big background and centered it, then I cant see the bg.
http://imgur.com/zbL1K


css:
@charset "UTF-8";


body{ background: #588F27; margin: 0px; padding: 0px;

}



html {


}

#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(banner.gif) no-repeat;
background-position: center;
}
#contentArea {width:100%; height: 600px; margin: 0px; padding:0px; background: url(bodybg.jpg) no-repeat; background-position: center;}




----------------------
I'm just not sure what went wrong, I'm in no way saying your advice was wrong so please don't get offended :3
 
Q

qkrghkahr

New Member
okay the things I'm trying to accomplish:
*Get rid of the space on the side
*center the paper image. I don't know why it's off on the side like that
thanks!

my attempted solution was to add another div but it gave the same results.
how i tried to fix it:
html:

<!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>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>

<body>


<div id="bannerArea">
<div id= "bannerText">
<div id="logo">
<h1>Hp</h1>
<h2>designs</h2>
</div>
</div>
</div>



<div id="contentArea">
<div id="contentBorder">
<div id="containerBg2">
</div>
</div>
</div>


</body>
</html>


------------------------
css:
@charset "UTF-8";


body {background: #45701f; margin: 0px; padding: 0px;

}




#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(bannerStich.jpg) no-repeat;
background-position: center;
}

#contentArea {width:100%; height: 1000px; margin: 0px; padding:0px; background: url(bodybg.jpg) no-repeat; background-position: center;
}

#bannerText {
width:950px; height:325px; margin:0 auto; padding:0px;
}

#logo {
width: 300px; height: 60px;padding: 0px; margin-top: px; float: left;
}

#logo h1 {
font-family:Tahoma; font-size:65px; color: #7D642B; font-weight:bold; margin: 0px; padding:0px; text-shadow: #513F1A 0.025em 0.05em 0em;
}

#logo h2 {
font-family: cursive; font-size:20px; color: #B19E75; font-weight:bold; margin: 0px; padding:0px; text-shadow: #635740 0.025em 0.05em 0em; letter-spacing: 0.35em;
}
#containerBg2 {
width: 950px; height: 924px; background-position: center; margin-left: 25px; margin-right: 25px; background: url(contentBg.jpg) no-repeat; padding-top:25px;
}

#contentBorder {width: 1000px; height: 1000px; margin: 0px; padding: 0px;}


__________________________________________________
screenshot: http://imgur.com/imm9T

html:


<!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>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>

<body>


<div id="bannerArea">
<div id= "bannerText">
<div id="logo">
<h1>Hp</h1>
<h2>designs</h2>
</div>
</div>
</div>



<div id="contentArea">
<div id="containerBg2">
</div>
</div>



</body>
</html>

------------------
css:

@charset "UTF-8";


body {background: #45701f; margin: 0px; padding: 0px;

}




#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(bannerStich.jpg) no-repeat;
background-position: center;
}

#contentArea {width:100%; height: 1000px; margin: 0px; padding:0px; background: url(bodybg.jpg) no-repeat; background-position: center;
}

#bannerText {
width:950px; height:325px; margin:0 auto; padding:0px;
}

#logo {
width: 300px; height: 60px;padding: 0px; margin-top: px; float: left;
}

#logo h1 {
font-family:Tahoma; font-size:65px; color: #7D642B; font-weight:bold; margin: 0px; padding:0px; text-shadow: #513F1A 0.025em 0.05em 0em;
}

#logo h2 {
font-family: cursive; font-size:20px; color: #B19E75; font-weight:bold; margin: 0px; padding:0px; text-shadow: #635740 0.025em 0.05em 0em; letter-spacing: 0.35em;
}
#containerBg2 {
width: 950px; height: 924px; background-position: center; margin-left: 25px; margin-right: 25px; background: url(contentBg.jpg) no-repeat; padding-top:20px;
}

----------------------------
 
CaldwellYSR

CaldwellYSR

Member
It would be very helpful if you would put all of your code inside {HTML} {/HTML} tags (replace the curly brackets with square brackets) I'm not sure what part you were trying to center because I'm not reading all that code if it's not in tags ;) but whatever you want centered should have margin: 0 auto; in it's CSS rules.
 
Q

qkrghkahr

New Member
I'm not too sure about the html tags but I'll try to be more clear. I have 3 parts that I'm trying to arrange. #left, #center , and #right. I tried pushing things with margin-left but it didn't work out like I thought it would. I've highlighted the parts I'm trying to fix. Please help me decide what padding, margin to use. I don't want any space between the 3 parts.
http://imgur.com/CBNc3
HTML: 
<!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>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>

<body>


<div id="bannerArea">
	<div id= "bannerText">	
   	 	<div id="logo">
		<h1>Hp</h1>
        <h2>designs</h2>
</div>
</div>
</div>



<div id="contentArea">
<div id="contentBorder">
<div id="containerBg2">


[COLOR="Red"]<div id="left">
<h2>left</h2>
</div>


<div id="center">
<h2>Welcome</h2>
<h3>to my Poftfolio</h3>
</div>


<div id="right">
<h2>right</h2>
</div>[/COLOR]



</div>
</div>
</div>


</body>
</html>
----------------------------------------
[css]
@charset "UTF-8";


body {background: #45701f; margin: 0px; padding: 0px;

}
	



#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(bannerStich.jpg) no-repeat; 
background-position: center;
}

#contentArea {width:100%; height: 1000px; margin: 0px; padding:0px; background: url(bodybg.jpg) no-repeat; background-position: center;
}

#bannerText {
	width:950px; height:325px; margin:0 auto; padding:0px;
}

#logo {
	width: 300px; height: 60px;padding: 0px; margin-top: 0px; float: left;
}

#logo h1 {
	font-family:Tahoma; font-size:65px; color: #7D642B; font-weight:bold; margin: 0px; padding:0px; text-shadow: #513F1A 0.025em 0.05em 0em;letter-spacing: -0.08em;
}

#logo h2 {
	font-family: cursive; font-size:20px; color: #B19E75; font-weight:bold; margin: 0px; padding:0px; text-shadow: #635740 0.025em 0.05em 0em; letter-spacing: 0.35em;
}
#containerBg2 {
	width: 950px; height: 924px; background-position: center; margin-left: 192px;background: url(contentBg.jpg) no-repeat;
}

#contentBorder {width: 1000px; height: 1000px; margin: 0px; padding-top: 25px;}

#logo h1:hover { text-shadow: #FFF 0em 0em 0.75em, #513F1A 0.025em 0.05em 0em, #FFF7AE 0em 0em 0.5em; text-decoration: none;
}

#logo h2:hover { text-shadow: #FFF 0em 0em 0.75em, #635740 0.025em 0.05em 0em, #FFF7AE 0em 0em 0.5em; text-decoration: none;
}

#center { width:340px; height: 900px; margin:0px; padding: 0px; float:left;
}

#center h2 { font-size: 60px; font-family: cursive; color: #bda88b; text-shadow: black 0.025em 0.025em 0.08em; text-align: center; 
	
}

[COLOR="red"]#center h3 { font-size: 50px; font-family: cursive; color: #bda88b; text-shadow: black 0.025em 0.025em 0.08em; text-align: center;
	
}

#left {width:290px; height: 900px; margin:0px; padding: 0px; float:left;
	
}

#right {width:290px; height: 900px; margin:0px; padding: 0px; float:left;
	
}[/COLOR]
 
You must log in or register to reply here.
Top