Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

Receive Fast Advice
Learn Programming Languages

Get Professional Website Reviews
Quick Troubleshooting Assistance

The Web Squeeze > Designing Your Website > CSS

Background Problem

This is a discussion on Background Problem, within the CSS section. This forum and the thread "Background Problem" are both part of the Designing Your Website category.

Reply to this topic

Start new topic

Background Problem

unitedcraig View Member Profile	Feb 18 2008, 05:43 PM Post #1
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	Designing a template for the site, and i have the background image i want. i have got one for the header, and i want a similar thing for the main area. http://simplyfreeware.co.uk/db/index.php i want the image to go behind the whole main section, but different bits go behind the sidebar and the main content :S Here is my code, any help is appriciated . HTML CODE <pre id="line1"><span class="doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span> <<span class="start-tag">html</span><span class="attribute-name"> xmlns</span>=<span class="attribute-value">"http://www.w3.org/1999/xhtml" </span><span class="attribute-name">xml:lang</span>=<span class="attribute-value">"en" </span><span class="attribute-name">lang</span>=<span class="attribute-value">"en"</span>> <<span class="start-tag">head</span>> <<span class="start-tag">title</span>>Bentley Motoring Academy</<span class="end-tag">title</span>> <<span class="start-tag">link</span><span class="attribute-name"> rel</span>=<span class="attribute-value">"shortcut icon" </span><span class="attribute-name">href</span>=<span class="attribute-value">"/images/favicon.png" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"Content-Language" </span><span class="attribute-name">content</span>=<span class="attribute-value">"English" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"content-type" </span><span class="attribute-name">content</span>=<span class="attribute-value">"text/html; charset=iso-8859-1" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"author" </span><span class="attribute-name">content</span>=<span class="attribute-value">"Craig Moran(www.simplyfreeware.co.uk)" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"description" </span><span class="attribute-name">content</span>=<span class="attribute-value">"Reviews and locations for the best free software on the web" </span><span class="error"><span class="attribute-name">/</span></span>> </pre><pre id="line11"> <<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"keywords" </span><span class="attribute-name">content</span>=<span class="attribute-value">"free, download, freeware, software, shareware, open source, best of the web, recommended" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">meta</span><span class="attribute-name"> name</span>=<span class="attribute-value">"Robots" </span><span class="attribute-name">content</span>=<span class="attribute-value">"index,follow" </span><span class="error"><span class="attribute-name">/</span></span>> <<span class="start-tag">link</span><span class="attribute-name"> href</span>=<span class="attribute-value">"styles.css" </span><span class="attribute-name">rel</span>=<span class="attribute-value">"stylesheet" </span><span class="attribute-name">type</span>=<span class="attribute-value">"text/css" </span><span class="error"><span class="attribute-name">/</span></span>> </<span class="end-tag">head</span>> <<span class="start-tag">body</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"container"</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"navigation"</span>> <<span class="start-tag">ul</span>> </pre><pre id="line25"> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"aboutus.php"</span>>About Us</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"prices.php"</span>>Prices</<span class="end-tag">a</span>></<span class="end-tag">li</span>> <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"contact.php"</span>>Contact</<span class="end-tag">a</span>></<span class="end-tag">li</span>> </<span class="end-tag">ul</span>> </<span class="end-tag">div</span>> <<span class="start-tag">h1</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"index.html"</span>>Bentley Motoring Academy</<span class="end-tag">a</span>></<span class="end-tag">h1</span>> </<span class="end-tag">div</span>> </pre><pre id="line34"><<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"main"</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"content-index"</span>> <<span class="start-tag">p</span>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat, velit in suscipit sollicitudin, ipsum pede convallis mi, ut malesuada mi nulla vel lorem. Curabitur eu tortor. Vivamus tincidunt vestibulum nisi. Phasellus sodales. Morbi mauris magna, molestie in, tempus quis, hendrerit sed, nulla. Cras adipiscing euismod lectus. Vivamus augue libero, tincidunt quis, semper et, faucibus vitae, pede. Aliquam semper. Vestibulum at sem nec ligula elementum scelerisque. Integer lacus leo, rhoncus at, tristique non, tristique adipiscing, nisl. Duis dapibus odio at nunc. Aenean lorem metus, euismod id, pretium vitae, aliquam in, sapien. Praesent eget lectus. Morbi tempus pretium tellus. Integer magna pede, nonummy non, porttitor et, commodo id, pede. Nulla facilisi. Mauris commodo, sapien id tempor egestas, eros ligula tempor elit, vel molestie nunc neque id eros. </<span class="end-tag">p</span>> </<span class="end-tag">div</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"sidebar-index"</span>> <<span class="start-tag">img</span><span class="attribute-name"> src</span>=<span class="attribute-value">"images/infosquare.png" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"info square" </span><span class="error"><span class="attribute-name">/</span></span>> Lorem ipsum dolor sit amet, consectetuer elit. Nullam volutpat, velit in suscipit sollicitudin. <<span class="start-tag">img</span><span class="attribute-name"> src</span>=<span class="attribute-value">"images/infosquare.png" </span><span class="attribute-name">alt</span>=<span class="attribute-value">"info square" </span><span class="error"><span class="attribute-name">/</span></span>> Vivamus tincidunt vestibulum nisi. Phasellus sodales. Morbi mauris magna, molestie in, tempus.</<span class="end-tag">div</span>> </pre><pre id="line49"></<span class="end-tag">div</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"push"</span>></<span class="end-tag">div</span>> </<span class="end-tag">div</span>> <<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"footer"</span>> &<span class="entity">copy;</span> 2008 Craig Moran - all rights reserved <<span class="start-tag">br</span><span class="error"><span class="attribute-name"> /</span></span>> <<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"http://validator.w3.org/check?uri=referer"</span>>XHTML</<span class="end-tag">a</span>>&<span class="entity">nbsp;</span> \|&<span class="entity">nbsp;</span> <<span class="start-tag">a</span><span class="attribute-name"> href</span>=<span class="attribute-value">"http://jigsaw.w3.org/css-validator/check/referer"</span>>CSS</<span class="end-tag">a</span>> </pre><pre id="line60"></<span class="end-tag">div</span>> </<span class="end-tag">body</span>> </<span class="end-tag">html</span>></pre> CSS CODE /*BASIC ELEMENTS/ body,html { background-image: url(images/background.jpg); margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 16px; } h1 { display:block; width:345px; height:75px; text-indent:-9009px; background:transparent url(images/logo.png) no-repeat 0 0; } h1 a { display:block; width:100%; height:100%; outline:none; } /CONTAINER WRAPPER/ #container { width: 750px; min-height: 100%; margin: 0 auto -4em; } /HEADER/ #header { background-image: url(images/headerbg.png); } /NAVIGATION/ #navigation { float: right; width: 300px; margin-right: 0px; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation ul li { float: left; width: 90px; padding-top: 22px; } #navigation ul li a { display: block; height: 20px; text-transform: uppercase; color: #333; text-decoration: none; font-weight: bold; text-align: center; margin-right: 32px; padding-top: 8px; letter-spacing: 1px; font: 10px Tahoma, Geneva, sans-serif; } #navigation ul li a.last { margin-right: 0; } #navigation ul li a:hover { background-color: #66cc00; border-bottom: 3px solid #669933; } #active { color: #333; text-decoration: none; font-weight: bold; text-align: center; padding: 8px 0 0 0; margin: 0; letter-spacing: 1px; font: 10px Tahoma, Geneva, sans-serif; border-bottom: 3px solid #003300; } /MAIN CONTENT AREA/ #main { background-image: url(images/contentbg.png); } /MAIN-CONTENT/ #content-index { float: left; width: 72%; padding-left: 8px; background-image: inherit; } #content-all { padding: 10px 30px 0px 30px; text-align: justify; background-image: inherit; } /MAIN-SIDEBAR/ #sidebar-index { float: right; width: 22%; overflow: hidden; font-size: 11px; text-align: center; background-image: inherit; } /FOOTER/ .footer, .push { height: 4em; / .push must be the same height as .footer */ } #footer, a { text-align: center; text-decoration: none; font-size: 12px; color: #003300; } a#downloadsTab { display: block; height: 200px; position: absolute; top: 210px; left: 667px; width: 34px; text-indent: -9000px; background: url( http://www.bencardy.co.uk/images/downloadTab.gif ) no-repeat 0 0; color: #40322e; text-decoration: none; } -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

Monie View Member Profile	Feb 19 2008, 03:19 AM Post #2
Squeeze Machine Posts: 733 Joined: 13-February 08 From: Borneo	Hey mate.. Did you check your site in FF. The problem is only occur in IE (I am using IE7). Let me have a detail look at the code first and reply to you ASAP (if no one is faster enough than me.. LOL) --------------------

unitedcraig View Member Profile	Feb 19 2008, 03:25 AM Post #3
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	There is no BG at all in IE. what i want is the image to go behind both the writing and the footer, like it is on the about us page http://simplyfreeware.co.uk/db/aboutus.php, but extend all the way to the bottom, not cut off after the text has ended. Thanks mate -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

Monie View Member Profile	Feb 19 2008, 03:45 AM Post #4
Squeeze Machine Posts: 733 Joined: 13-February 08 From: Borneo	Your "images/background.jpg" is basically a white image right. I don't know where I am going with this but try just set the color to white instead using image. And later throw away the background-image: inherit code in your CSS. --------------------

unitedcraig View Member Profile	Feb 19 2008, 03:52 AM Post #5
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	At college at the moment but ill take a look when i get back, cheers for that Anyone else any ideas and yes the BG i want is the white image -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

Linda View Member Profile	Feb 19 2008, 07:46 AM Post #6
Co-Founder Posts: 3,095 Joined: 13-February 08 From: Pink House in USA	Craig can you repost your html? I can't get it to work with all the span stuff in there. -------------------- Maine-ly Web Design \| My Photography \| Twitter ME Check out Stumbleupon

Linda View Member Profile	Feb 19 2008, 07:51 AM Post #7
Co-Founder Posts: 3,095 Joined: 13-February 08 From: Pink House in USA	Craig, try changing your css to this CODE body { margin: 0 auto; } html { margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 16px; background: url(images/background.jpg); } -------------------- Maine-ly Web Design \| My Photography \| Twitter ME Check out Stumbleupon

unitedcraig View Member Profile	Feb 19 2008, 08:39 AM Post #8
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	QUOTE (Linda @ Feb 19 2008, 12:46 PM) Craig can you repost your html? I can't get it to work with all the span stuff in there. CODE </P> <P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</A>"></P> <P><html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>" xml:lang="en" lang="en"> <head> <title>Bentley Motoring Academy</title> <link rel="shortcut icon" href="/images/favicon.png" /> <meta http-equiv="Content-Language" content="English" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Craig Moran(<A href="http://www.simplyfreeware.co.uk/">www.simplyfreeware.co.uk</A>)" /> <meta name="description" content="Reviews and locations for the best free software on the web" /> <meta name="keywords" content="free, download, freeware, software, shareware, open source, best of the web, recommended" /> <meta name="Robots" content="index,follow" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head></P> <P><body></P> <P><div id="container"></P> <P><div id="header"></P> <P><div id="navigation"> <ul> <li><a href="aboutus.php">About Us</a></li> <li><a href="prices.php">Prices</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div></P> <P><h1><a href="index.html">Bentley Motoring Academy</a></h1></P> <P></div></P> <P><div id="main"></P> <P><div id="content-index"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat, velit in suscipit sollicitudin, ipsum pede convallis mi, ut malesuada mi nulla vel lorem. Curabitur eu tortor. Vivamus tincidunt vestibulum nisi. Phasellus sodales. Morbi mauris magna, molestie in, tempus quis, hendrerit sed, nulla. Cras adipiscing euismod lectus. Vivamus augue libero, tincidunt quis, semper et, faucibus vitae, pede. Aliquam semper. Vestibulum at sem nec ligula elementum scelerisque. Integer lacus leo, rhoncus at, tristique non, tristique adipiscing, nisl. Duis dapibus odio at nunc. Aenean lorem metus, euismod id, pretium vitae, aliquam in, sapien. Praesent eget lectus. Morbi tempus pretium tellus. Integer magna pede, nonummy non, porttitor et, commodo id, pede. Nulla facilisi. Mauris commodo, sapien id tempor egestas, eros ligula tempor elit, vel molestie nunc neque id eros. </p></P> <P></div></P> <P><div id="sidebar-index"> <img src="images/infosquare.png" alt="info square" /> Lorem ipsum dolor sit amet, consectetuer elit. Nullam volutpat, velit in suscipit sollicitudin. <img src="images/infosquare.png" alt="info square" /> Vivamus tincidunt vestibulum nisi. Phasellus sodales. Morbi mauris magna, molestie in, tempus.</div></P> <P></div></P> <P><div id="push"></div></P> <P></div></P> <P><div id="footer"></P> <P>© 2008 Craig Moran - all rights reserved <a href="<A href='http://validator.w3.org/check?uri=referer">XHTML</a>&nbsp'>http://validator.w3.org/check?uri=referer">XHTML</a>&nbsp</A>; \|  <a href="<A href="http://jigsaw.w3.org/css-validator/check/referer%22%3ECSS%3C/a">http://jigsaw.w3.org/css-validator/check/referer">CSS</a</A>></P> <P></div></P> <P></body></P> <P></html></P> <P> Sorry about that, wasn't on my pc so i copied it from the FF source, not sure why all the span things were in there :S -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

unitedcraig View Member Profile	Feb 19 2008, 08:41 AM Post #9
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	QUOTE (Linda @ Feb 19 2008, 12:51 PM) Craig, try changing your css to this CODE body { margin: 0 auto; } html { margin: 0 0 0 0; padding: 0 0 0 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 16px; background: url(images/background.jpg); } Wouldn't this apply it everywhere, including over the header? what i would like is a seperate BG for the main section, like i have got for the footer at the moment Thanks Craig -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

Linda View Member Profile	Feb 19 2008, 08:44 AM Post #10
Co-Founder Posts: 3,095 Joined: 13-February 08 From: Pink House in USA	I guess it would help if I had read the first post better! I'll have a look! -------------------- Maine-ly Web Design \| My Photography \| Twitter ME Check out Stumbleupon

unitedcraig View Member Profile	Feb 19 2008, 08:46 AM Post #11
Squeeze Machine Posts: 560 Joined: 14-February 08 From: Stockport	QUOTE (Linda @ Feb 19 2008, 01:44 PM) I guess it would help if I had read the first post better! I'll have a look! Probably would have helped if i had worded my first post better lol Thanks for your time -------------------- Craig Moran.co.uk Kid Cudi - Kid Named Cudi Free Download Conditional Comments… What are they?

Monie View Member Profile	Feb 20 2008, 02:48 AM Post #12
Squeeze Machine Posts: 733 Joined: 13-February 08 From: Borneo	My laptop is still under repair man, sorry I cant help you much I didn't even have my text editor in the office PC! Stupid PC! If I am lucky enough my laptop will be done tomorrow Well, Linda is on the way so let's hope and pray LOL --------------------

« Next Oldest · CSS · Next Newest »

If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!

Reply to this topic

Start new topic

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members:

Similar Topics

Similar Topics

Similar Topics

		Topic Title	Replies	Topic Starter	Views	Last Action
		Graphics Background	16	unitedcraig	510	20th February 2008 - 07:34 AM Last post by: unitedcraig
		CSS Background Question	11	shammy2007	657	22nd February 2008 - 11:09 AM