We help IT Professionals succeed at work.

HTML Textures

Robert Ehinger
on
333 Views
Last Modified: 2012-05-09
Here is the beginning of my code for a web page. I want to add texture or image to the outside of the page so that people using wide screen monitors don't see just white space. What is the code and where does it go?

Thank you!!

Robert

<!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>Untitled Document</title>
<style type="text/css">

body {
      background-image: url(images/SSPP2.jpg);
      background-repeat: no-repeat;
      background-position:center top;
      margin:0 auto;
        background-color: #81BEF7;
}
Comment
Watch Question

JF0

Commented:
By supplying a background image or color to the body tag you are enabling the look that you want. The next step is typically to have a #container div that you specify a width for your actual page; either in px or a % less than 100. You can use the 0 auto margin trick to center this container and anything outside of your container will display the body background.
Robert EhingerIT specialist

Author

Commented:
OK, the code that I have (background-color: #81BEF7; ) gives me a light blue background with my SSPP2.jpg image on top of it. The light blue only shows at the outside of the page where white space would normally appear. I tried changing it to an link to the image I want to use for this purpose and the SSPP2.jpg no longer appears.
JF0

Commented:
Try putting your path/file in quotes:
 background-image:  url('images/SSPP2.jpg');

Otherwise, provide a full example so I can see and understand better what you need.
Robert EhingerIT specialist

Author

Commented:
OK, here is the entire code for the page I have. It works just fine to give me the background image that I want on the page plus the light blue that shows outside the width that I have set. The problem comes in if I try to change the light blue to a texture of am image that I think might look better with the background.

Thanks!

Robert

<!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>Untitled Document</title>
<style type="text/css">

body {
      background-image: url(images/Project2.jpg);
      background-repeat: no-repeat;
      background-position:center top;
      margin:0 auto;
    background-color: #82CAFA; /* Change this value to the color you want */
}



.twoColFixLtHdr #container {
      width: 820px;  

      margin: 0 auto;
      border: 2px solid #000000;
      text-align: left;
}
.twoColFixLtHdr #header {
      background:
      padding: 0 10px 0 20px;  
}
.twoColFixLtHdr #header h1 {
      margin: 0;
      padding: 10px 0;
}
.twoColFixLtHdr #sidebar1 {
      float: left;
      width: 400px;
      background:
      padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #mainContent {
      margin: 0 0 220px;
      padding: 0 20px;
.twoColFixLtHdr #footer {
      padding: 0 10px 0 20px;
      background:
}
.twoColFixLtHdr #footer p {
      margin: 0;
}
.fltrt {
      float: right;
      margin-left: 8px;
}
.fltlft {
      float: left;
      margin-right: 8px;
}
.clearfloat {
      clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.style1 {
      color: #333333;
      font-weight: bold;
      font-size: 66px;
      font-style: italic;
      font-family: Georgia, "Times New Roman", Times, serif;
}
-->
</style></head>

<body class="twoColFixLtHdr">

<div id="container">
<div id="header">
  <div align="center">
    <h2 align="center">&nbsp;</h2>
  </div>
      <!-- end #header -->
  <!-- end #header --></div>
<div id="sidebar1">
  <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;</p>
   
   
   
    <p>&nbsp;</p>
    <p>&nbsp;</p><br /><br /><br /><br /><br />
  <h2>&nbsp; &nbsp;&nbsp; &nbsp;<strong><u>PASTOR:</u></strong></h2>
    <h3>
      &nbsp;&nbsp;&nbsp; &nbsp;Fr. Ronald Rieder, O.F.M. Cap.
    </h3>
<p><h3>&nbsp; &nbsp;&nbsp; &nbsp;<strong><u>Associate Pastor:</u></strong></h3>
        <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Fr. Augustine Kochuparathanathu, V.C.</strong></h3>
            </p>
            </h4>
  <p>&nbsp;</p>
    <p><h2>&nbsp; &nbsp;&nbsp; &nbsp;<strong><u>STAFF:</u></strong></h2>
  <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Kelly Jennings, </strong>Parish Secretary
          </p>
        </h3>
        <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Sr. Miriam Gill,</strong> SSND, Dir. Of Rel. Ed.</h3>
        <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Sr. Loretta Bauer,</strong> SSND, Pastoral Assistant</h3>
  <p>&nbsp;</p>
    <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Jerid Miller, </strong>Pastoral  Associate for <a href="youth.html">Youth Ministry,</a><br />
      &nbsp;&nbsp;&nbsp; &nbsp;<a href="rcia.html">Adult Formation and R.C.I.A.</a></h3>
   <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Jon Stotts, </strong>Pastoral  Associate for Youth Ministry<br />
     &nbsp;&nbsp;&nbsp;  And <a href="liturgy.html">Liturgy</a></h3>
   <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Rosemary Stoffel,</strong> <a href="music.html">Director of Music</a></h3>
   <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Larry Bonbrake,</strong> Director of Maintenance</h3>
   <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Michael Arnold,</strong> Maintenance</h3>
   <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Don &amp; Jackie Lindsay</strong><br />
     &nbsp;&nbsp;&nbsp; <a href="marriageprep.html">Director of Marriage  Preparation</a></h3>
  <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Carlin Richard</strong><br />
   &nbsp;&nbsp;&nbsp; &nbsp; <a href="servers.html">Director of Altar Servers</a></h3>
  <p>&nbsp;&nbsp;&nbsp; &nbsp;</p>
    <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Tom Karst,</strong> President of <a href="pcouncil.html">Parish Council</a></h3>
    <h3><strong>&nbsp;&nbsp;&nbsp; &nbsp;Jason Woolard,</strong> School Principal</h3>
  <p>&nbsp;&nbsp; &nbsp;&nbsp;</p>
</div>
  <div id="mainContent">

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p align="center">&nbsp;</p><br /><br /><br />
    <p align="center">&nbsp;</p>
    <h2 align="center"><br><strong><u>MASSES:</u></strong><br /></h2>
    <h3 align="center"><strong>Saturday Evening: 5:00 p.m.</strong>
     
    </h3>
    <h3 align="center"><strong>Sunday: 6:30, 8:00 &amp; 10:30 p.m.</strong></p></h3>
   
    <h3 align="center"><strong>Vigil Mass for Holy Days:</strong><br />
      <strong>7:00 p.m. the evening before</strong><br />
      <strong>Holydays: 7:00, 9:00 a.m. &amp; 5:30 p.m.</strong></p></h3>
   <h3 align="center"><strong><a href="weekdaymasses.html">Click Here for Weekday Mass Times</a></strong></p></h3>
   
   
    <h2 align="center"><br><strong><u>MARRIAGES</u></strong><br /></h2>
      <h3 align="center"><strong>Please call the Rectory.<br />
      Must call at least  six months in advance.<br />
    <a href="weddings.html">Click here for more  information.</a></p></h3>
    <h3 align="center">Click her for <a href="requests.html">REQUESTS </a>for  records, <br />bulletin notices, deadlines etc.</p></h3>
    <p align="center">&nbsp;</p>
    <h2 align="center"><br><strong><u>CONFESSIONS:</u></strong></h2>
   <h3 align="center"> Saturdays: 3:30 – 4:15  p.m.</h3>
    <h3 align="center">Weekdays before each  Mass</p></h3>
    <h2 align="center"><br><strong><u>BAPTISMS</u></strong><br /></h2>
    <h3 align="center"> Please call in  advance</p></h3>
   
    <h3 align="center">Click here for  information about our<br />
      <a href="hcs.html">HUNTINGTON CATHOLIC SCHOOL</a></p></h3>
    <h3 align="center">Click here to view the<br /> <a href="calendar.html">Saints Peter &amp; Paul Monthly Parish Calendar </a></p></h3>
   
    <p align="center">&nbsp;</p>
    <p align="center">Saints Peter and Paul  Parish, 860 Cherry Street, Huntington, IN 46750<br />
      Phone:  29-60-356-4798  Fax: 260-356-7154  Convent Phone: 260-356-7390<br />
      Email:  ssppcatholicchurch@saintspeterandpaulcatholicchurch.org</p>
</div>
      <div id="footer"></div>
<!-- end #container -->
</body>
</html>
JF0

Commented:
can you please attach your background image so I can see exactly what it looks like?


JF0

Commented:
when you say "I try to change the light blue to a texture of am image" are you really trying to change background-color: #82CAFA; to background-color: someimage.jpg;
Robert EhingerIT specialist

Author

Commented:
Sure!
Project2.jpg
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Robert EhingerIT specialist

Author

Commented:
I was trying to change background-color: #82CAFA; to background-image: url(images/texture.jpg);
JF0

Commented:
You can only have one background-image per css rule. So if you just changed that reference and kept the other background-image reference as well then you will only see 1 of the images.

I think the adjusted CSS I provided will give you what you expect.


Robert EhingerIT specialist

Author

Commented:
OK, with the code you suggested I get the texture to cover the entire screen like I want but now the image of the church is no longer there.
JF0

Commented:
can you provide your adjusted css/html?
Robert EhingerIT specialist

Author

Commented:
I was going to send my revised code but I refreshed the page again and it worked.
Robert EhingerIT specialist

Author

Commented:
Thank you very much!!

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.