• Locked
4 replies [Last post]
Fri, 2010-03-12 10:34
peter-uk
peter-uk's picture
User offline. Last seen 2 years 9 weeks ago. Offline
newbie
Joined: 2010-03-10
Posts: 6
Points: 9

Hello again,
I've tried to insert an image as a background in an external style sheet in the right column of my page here
I think the code is right, but nothing happens. I've uploaded the image to my images folder. What I wanted to do is have the text in the right column sit within the background image. Here is the code, your help is appreciated.

#rightcol{
 width:34%; 
 height:400px;
 
 float:right; 
 position:relative; 
 background-image:url('images/rightcolumn-tiles.gif');
 background-repeat:no-repeat;
 
 }

Top
Tags:
Fri, 2010-03-12 14:53
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 16 weeks 6 days ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

construct the css like

construct the css like this...

background: url(images/rightcolumn-tiles.gif) no-repeat;


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Fri, 2010-03-12 17:51
#2
peter-uk
peter-uk's picture
User offline. Last seen 2 years 9 weeks ago. Offline
newbie
Joined: 2010-03-10
Posts: 6
Points: 9

I tried that, but still no

I tried that, but still no luck. Puzzled

Top
Fri, 2010-03-12 18:09
#3
CupidsToejam
CupidsToejam's picture
User offline. Last seen 16 weeks 6 days ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

I'm not sure whats going on

I'm not sure whats going on here, but I grabbed all your code, and loaded it into my editor. I embedded all the css tom ake it easy for me. The background shows fine. Here is the code I used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>BS36 - Home</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="" content="" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<style>
body {
	font-size:100%;
}
p {
	font-size:0.875em;
}
/*  */ 
html,
body {
	margin:0;
	padding:0;
	text-align:center;
}
#pagewidth {
	width:760px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
#header {
	position:relative;
	height:120px;
	background-color:#FFFFFF;
	width:100%;
}
#leftcol {
	width:25%;
	height:400px;
	float:left;
	position:relative;
	background-color:#FF1C0C;
}
#twocols {
	width:75%;
	float:right;
	position:relative;
}
#rightcol {
	width:34%;
	height:400px;
	float:right;
	position:relative;
	background: url(<a href="http://nationalplumbingcourses.com/images/rightcolumn-tiles.gif" rel="nofollow">http://nationalplumbingcourses.com/images/rightcolumn-tiles.gif</a>) no-repeat;
}
#maincol {
	background-color: #FFFFFF;
	float: left;
	display:inline;
	position: relative;
	width:66%;
	height:400px;
}
#footer {
	height:15px;
	background-color:#8C7CD6;
	clear:both;
}
/* *** Float containers fix:
 <a href="http://www.csscreator.com/attributes/containedfloat.php" rel="nofollow">http://www.csscreator.com/attributes/containedfloat.php</a> *** */ 
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */  
 
 
 
 /*printer styles*/ 
 @media print {
/*hide the left column when printing*/ 
#leftcol {
	display:none;
}
/*hide the right column when printing*/ 
#rightcol {
	display:none;
}
#twocols,
#maincol {
	width:100%;
	float:none;
}
</style>
</head>
<body>
<div id="pagewidth" >
  <div id="header" > </div>
  <div id="wrapper" class="clearfix" >
    <div id="twocols" class="clearfix">
      <div id="maincol" > Main Content Column </div>
      <div id="rightcol" > <br>
        <br>
        <div align="center">
          <p>HOME</p>
          <br>
          <br>
          <p>OUR SERVICES</p>
          <br>
          <br>
          <p>CONTACT US</p>
        </div>
      </div>
    </div>
    <div id="leftcol" > Left Column </div>
  </div>
  <div id="footer" > Footer </div>
</div>
</body>
</html>

make sure you validate this code, you do have some errors.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Fri, 2010-03-12 20:55
#4
peter-uk
peter-uk's picture
User offline. Last seen 2 years 9 weeks ago. Offline
newbie
Joined: 2010-03-10
Posts: 6
Points: 9

Yes, I've got it now. Thanks

Yes, I've got it now. Thanks for your help.

Top
  • Locked