Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

trying to add background image

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
US
Hello,

at my site at in my class loginsplash Im trying to add a background image to mimic the color of my wrapper class background to match it, but when I add the background image to loginsplash it moves down my splashcondense class.

Can someone tell me what I need to adjust so that everything is aligned correctly?

below is my css and html

thanks

ul.MenuBarHorizontal li ul li {
clear:left;
}


.wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(images/testbanner9.png);
background-repeat: no-repeat;
border: thin solid #FFF;
}
.footer {
width: 900px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-image: url(images/footerbanner.png);
font-size: 12px;
color: #FFF;
font-weight: bold;
}
.news .Associations {
font-size: 20px;
padding-left: 35px;
}
.wrapper .content .news p {
padding-left: 35px;
}
.menu {
background-repeat: no-repeat;
height: 35px;
padding-top: 10px;
}

.top a {
color: #060;
font-size: 14px;

}

.top a:hover {
color: #060;
}

.menu .top {
height: 40px;
width: 700px;
float: right;
}
.about .mission {
color: #FFF;
text-align: left;
padding-left: 25px;
font-size: 15px;
}
.about ul {
color: #FFF;
text-align: left;
padding-right: 200px;
font-size: 14px;
}


.menu .Spry {
clear: both;
float: right;
}
.top {
text-align: right;
padding-right: 10px;
}

.splash {
height: 400px;
overflow: hidden;
}

.splash h1 {
color: #FFF;
font-size: 18px;
text-align: right;
padding-top: 55px;
padding-right: 40px;
}
.splash .welcome {
font-size: 20px;
color: white;
text-align: right;
padding-right:25px;
}
.splash .main {
text-align: right;
color: white;
padding-right: 25px;
padding-left: 350px;
}
.splash .splashcondense {
height: 400px;
margin-left: 245px;
background-image: url(images/gettycropped2_scaled.png);
background-repeat: no-repeat;
}
.about .About.Us {
font-size: 20px;
color: white;
padding-left: 10px;
}
.news .News.and.Events {
font-size: 20px;
color: #000;
padding-left: 35px;
}

.splash .deals {
color: #FFF;
font-size: 16px;
text-align: right;
padding-right: 100px;
}

.content {
height: 400px;
overflow: hidden;
}

.about {
float: left;
height: 100%
width: 400px;
background-image: url(images/leftcolumn_background2_new.png);
height: 485px;
width: 488px;
}

.news {
border: 2px solid #FFF;
float:right;
width:408px;
height:100%;
background-image: url(images/rightcolumn_background3.png);
}
.about .support {
padding-left: 150px;
color: WHITE;
padding-top: 25px;
}
.about .equipment {
height: 150px;
width: 170px;
float: right;
margin-right: 10px;
margin-top: 55px;
background-image: url(images/bigstockphoto_Red_Truck_1970809_cropped_new_CSS.png);
}
.about .dropdown {
margin-top: 60px;
}
.splash .loginsplash {
float: left;
height: 400px;
width: 245px;
overflow: hidden;
background-image: url(images/testbanner12.png);
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url();
background-color: #000;
}
-->
</style></head>

<body>
<div class="wrapper">
<div class="top"><p><a href=" Your Equipment</a> <a href=" Quote Request</a> <a href=" Booking</a> <a href=" Loads</a> <a href=" Services</a> <a href=" top>
<div class="menu">
<div class="Spry">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href=" <li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>
</div spry>
</div menu>
<div class="splash">
<div class="loginsplash"></div>
<div class="splashcondense">
<h1>A FRESH NEW LOOK AT TRANSPORTATION</h1><p class="deals">"No Bad Deals"</p><p class="welcome">Welcome to Our Website</p><p class="main">With over two decades of service, Meadow Lark has offered innovative solutions to any transportation needs with on-demand operational services and advanced technology. Customers, contractors, and agents alike benfit from association with our company. Family owned and operated, Meadow Lark is the permier choice for your shipping requirements</p></div></div>

<div class="content">
<div class="about">
<div class="equipment"></div equipment>
<h1 class="About Us">About Our Company</h1>
<p class="mission">Mission Statement</p>
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare our selves to any other cusiness, only to how WE were yesterday</li>
<li>Our word is our bond</li>
</ul>
<p class="support">SUPPORT CENTER <BR />24 Hours / 7 days a week <br />1-800-736-5233</p>
<div class="dropdown"><form name="form1" id="form1">
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
<option>open for online requests..</option>
<option value="index.htm">home</option>
<option value="flatbedservices.htm">flatbed services</option>
<option value="vanservices.htm">van services</option>
<option value="heavyhaulservices.htm">heavy haul services</option>
<option value="globalservices.htm">global services</option>
<option value="ltlservices.htm">ltl services</option>
<option value="crossborderservices.htm">cross border services</option>
</select>
<input type="button" name="Button1" value="Go" onclick="MM_jumpMenuGo('menu1','parent',0)" />
</form></div dropdown>

</div about>
<div class="news"><h1 class="News and Events">News and Events</h1><script type="text/javascript">

/***********************************************
* IFRAME Scroller script- © Dynamic Drive DHTML code library (* This notice MUST stay intact for legal use
* Visit Dynamic Drive at for full source code
***********************************************/

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="400px" height="150px" marginwidth="0" marginheight="0" hspace="5" vspace="20" frameborder="1" scrolling="no"></iframe>')
</script><h2 class="Associations">Associations</h2><p><a href=" src="images/SCRAlogo2.png" border="0"></a> <a href=" src="images/NITL 100_small years_v8_2.jpg" border="0" /></a> <a href=" src="images/TIA_Header_02_2.gif" border="0"></a> <a href=" src="images/smartway2.png" border="0"/></a>
</div news>
</div content>
</div>
<div class="footer">
<div class="social"><a href=" target="_blank"><img src="images/social network logos/facebooksmall2.jpg" alt="meadow lark facebook" border="0"/></a> <a href=" target="_blank"><img src="images/social network logos/twitter4.jpg" border="0"/></a>a</div>

<table width="40%" border="0" cellpadding="0" cellspacing="0" class="TextLinks" style="width: 65%;">
<tbody>
<tr>
<td colspan="1"><strong>Site Pages</strong><br /></td>
<td colspan="1"><strong>Services</strong><br /></td>
<td colspan="1"><strong>Services</strong><br /></td>
<td colspan="1"><strong>Services</strong><br /></td>
</tr>
<tr>

<td valign="top"><a href=" /></a></td>

<td valign="top"><a href=" Services<br /></a>
<a href=" Services<br /></a>
<a href=" Haul Services<br /></a>
</td>

<td valign="top"><a href=" Services<br /></a>
<a href=" services<br /></a>
<a href=" Border Services<br /></a>
</td>



<td valign="top"><a href=" /></a>
<a href=" /></a>
<a href=" /></a>
<a href=" /></a>
</td>
</tr>
</tbody>
</table>

<table width="40%" border="0" cellpadding="0" cellspacing="0" class="TextLinks" style="width: 65%;"></table>

</div footer>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Sort by date Sort by votes
yes, I had planned on fixing those as Im just trying to add this section to left of my splash image so I can get the layout completed first. Any advice on how to account for the gap which shows up?

thanks
 
Upvote 0 Downvote
after I add in a background image it still has a gap? Any other ideas? I believe it may have something to do with my menu CSS, but any help would be appreciated. As Im trying to get it so that the spry menu fits flush with the splash image below and the content of "loginsplash" fits flush as well, as Im adding a php login section in there.

thanks
 
Upvote 0 Downvote
What you're doing is a bad idea in any circumstance. Here is how you should do it:

1. Change wrapper background color to be something tan, like the image background. This will help if the background image does not load for some reason.
2. Remove the logo from the wrapper background image and change the image to be 900px wide, 1px high and repeated across y axis.
3. Add an extra logo element that will hold your image logo.
4. Remove the loginsplash element, since it will not be needed then.

However, that is not what creates the gap. The gap is created by the h1 element inside the splashcondense. Just add margin-top: 0; to that h1 element and the gap will disappear. And check here to learn more about collapsing margins, the reason why the gap appeared:
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
loginsplah is actually going to be used for another section which will hold 2 fields username and password, so that CSS actually needs to be there
 
Upvote 0 Downvote
ok, I did as you suggested and still have my loginsplash section which fits well now...thanks for the tips and your help Vragabond
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
576
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
567
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
604
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top