Tweet
I have a background image to my body tag, and have a background image to my main div wrapper which wraps everything really.
The main div wrapper has a fixed width, however the height and the background image doesnt seem to be able to be 100% so effectively height wise you are unable to see any of the body tag background image if you see what I mean.
Is there a way around this, Im just trying to perfect my backgrounds at the moment.
Thanks.
Code attached....................
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bodywrapper {font-style:serif;
color:#736F6E;
font-size:13px;
background-image:url('http://www.freecomputerdesktopbackgrounds.com/freebg/j03ecc0pg3m2y9.jpg');
}
.mainwrapper { width:950px;
margin:auto;
padding:25px;
background-image:url('http://static.wix.com/media/72ac58ea6bb1bf0b30048faac5eebf19.wix_mp'); }
.headnavandlogo {color:#5898ED;
font-size:12px;
margin-right:125px; }
.headnavandlogo ul {list-style-type:none; }
.headnav1 {float:right;
}
.headnav1 li {padding-bottom:3px;
padding-top:5px;
}
.headnav2 {float:right; }
.headnav2 li {padding-bottom:3px;
padding-top:5px;}
.headnav2 li:hover {border-bottom:solid;
border-width:1px;
}
.headnav1 li:hover {border-bottom:solid;
border-width:1px;
}
.homenav {border-bottom:solid;
border-width:1px;
margin-right:19px; }
.portfolionav:hover {padding-bottom:2px; }
.portfolionav {margin-right:15px; }
.contactusnav {margin-right:3px; }
.aboutus {padding-bottom:30px;
}
.aboutus p { }
.aboutus h2 {text-align:left;
border-bottom:solid;
border-width:1px;
background-color:#BDEDFF;
width:457px;
margin-top:140px; }
.seo {float:right;
width:457px;
margin-left:20px;}
.seo h2 {text-align:left;
border-bottom:solid;
border-width:1px;
background-color:#BDEDFF; }
.websitedesign {max-width:457px;
}
.websitedesign h2 {text-align:left;
border-bottom:solid;
width:457px;
border-width:1px;
background-color:#BDEDFF;}
.optimisationimage {margin-left:20px; }
.seofirstpara {margin-top:23px;
display:inline-block; }
</style>
</head>
<body id="bodywrapper">
<div class="mainwrapper">
<div class="headnavandlogo">
<ul class="headnav1">
<li class="portfolionav">PORTFOLIO</li>
<li class="contactusnav">CONTACT US</li>
</ul>
<ul class="headnav2">
<li class="homenav">HOME</li>
<li class="servicesnav">SERVICES</li>
</ul>
</div>
<div class="aboutus">
<h2>Introduction</h2>
<p>
Exercitum Hannibalis transeuntem Appenninum impediebat ferox tempestas:
magnus imber vento mixtus oppugnabat capita militum, qui verebantur ut
tantam vim frigoris ferre possent. Duos dies eo loco sicut obsessi
manserunt. Multi homines mortui sunt, multa animalia: etiam perierunt septem
elephanti ex iis qui semper adhuc superaverant.
Degressus Appennino Hannibal ad Placentiam castra movit et decem
milia passuum progressus consedit. Postero die duodecim milia peditum,
quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
Iam nona diei hora erat, cum Romanus dux, cum nulla spes esset capiendorum
castrorum, militibus imperavit ut omnino se reciperent. Hoc ubi Hannibal
accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
praefecti sociorum tres sunt interfecti.
</p>
</div>
<div class="seo">
<h2>Search engine optimisation</h2>
<p class="seopara">
<img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-optimisation.jpg" class="optimisationimage" />
<br />
<span class="seofirstpara">Degressus Appennino Hannibal ad Placentiam castra movit et decem
milia passuum progressus consedit. Postero die duodecim milia peditum,
quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
</span>
</p>
</div>
<div class="websitedesign">
<h2>Website development</h2>
<p class="websitedesignpara">
<img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-web-building-resized1.jpg" />
<br />
Hoc ubi Hannibal
accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
praefecti sociorum tres sunt interfecti.
</p>
</div>
</div>
</body>
</html>
The main div wrapper has a fixed width, however the height and the background image doesnt seem to be able to be 100% so effectively height wise you are unable to see any of the body tag background image if you see what I mean.
Is there a way around this, Im just trying to perfect my backgrounds at the moment.
Thanks.
Code attached....................
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bodywrapper {font-style:serif;
color:#736F6E;
font-size:13px;
background-image:url('http://www.freecomputerdesktopbackgrounds.com/freebg/j03ecc0pg3m2y9.jpg');
}
.mainwrapper { width:950px;
margin:auto;
padding:25px;
background-image:url('http://static.wix.com/media/72ac58ea6bb1bf0b30048faac5eebf19.wix_mp'); }
.headnavandlogo {color:#5898ED;
font-size:12px;
margin-right:125px; }
.headnavandlogo ul {list-style-type:none; }
.headnav1 {float:right;
}
.headnav1 li {padding-bottom:3px;
padding-top:5px;
}
.headnav2 {float:right; }
.headnav2 li {padding-bottom:3px;
padding-top:5px;}
.headnav2 li:hover {border-bottom:solid;
border-width:1px;
}
.headnav1 li:hover {border-bottom:solid;
border-width:1px;
}
.homenav {border-bottom:solid;
border-width:1px;
margin-right:19px; }
.portfolionav:hover {padding-bottom:2px; }
.portfolionav {margin-right:15px; }
.contactusnav {margin-right:3px; }
.aboutus {padding-bottom:30px;
}
.aboutus p { }
.aboutus h2 {text-align:left;
border-bottom:solid;
border-width:1px;
background-color:#BDEDFF;
width:457px;
margin-top:140px; }
.seo {float:right;
width:457px;
margin-left:20px;}
.seo h2 {text-align:left;
border-bottom:solid;
border-width:1px;
background-color:#BDEDFF; }
.websitedesign {max-width:457px;
}
.websitedesign h2 {text-align:left;
border-bottom:solid;
width:457px;
border-width:1px;
background-color:#BDEDFF;}
.optimisationimage {margin-left:20px; }
.seofirstpara {margin-top:23px;
display:inline-block; }
</style>
</head>
<body id="bodywrapper">
<div class="mainwrapper">
<div class="headnavandlogo">
<ul class="headnav1">
<li class="portfolionav">PORTFOLIO</li>
<li class="contactusnav">CONTACT US</li>
</ul>
<ul class="headnav2">
<li class="homenav">HOME</li>
<li class="servicesnav">SERVICES</li>
</ul>
</div>
<div class="aboutus">
<h2>Introduction</h2>
<p>
Exercitum Hannibalis transeuntem Appenninum impediebat ferox tempestas:
magnus imber vento mixtus oppugnabat capita militum, qui verebantur ut
tantam vim frigoris ferre possent. Duos dies eo loco sicut obsessi
manserunt. Multi homines mortui sunt, multa animalia: etiam perierunt septem
elephanti ex iis qui semper adhuc superaverant.
Degressus Appennino Hannibal ad Placentiam castra movit et decem
milia passuum progressus consedit. Postero die duodecim milia peditum,
quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
Iam nona diei hora erat, cum Romanus dux, cum nulla spes esset capiendorum
castrorum, militibus imperavit ut omnino se reciperent. Hoc ubi Hannibal
accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
praefecti sociorum tres sunt interfecti.
</p>
</div>
<div class="seo">
<h2>Search engine optimisation</h2>
<p class="seopara">
<img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-optimisation.jpg" class="optimisationimage" />
<br />
<span class="seofirstpara">Degressus Appennino Hannibal ad Placentiam castra movit et decem
milia passuum progressus consedit. Postero die duodecim milia peditum,
quinque equitum contra hostem ducit; nec Sempronius consul fugit proelium.
Atque eo die tria milia passuum inter duo castra fuerunt; postero die magnis
animis pugnaverunt. Primo vis Romanorum ita superior fuit ut non solum
vincerent, sed pulsos hostes in castra sequerentur et castra oppugnarent.
</span>
</p>
</div>
<div class="websitedesign">
<h2>Website development</h2>
<p class="websitedesignpara">
<img src="http://allmp3needs.com/wp-content/uploads/2011/08/PRIMUS-web-building-resized1.jpg" />
<br />
Hoc ubi Hannibal
accepit, extemplo, equitibus emissis, in hostem ipse cum peditibus e mediis
castris erupit. Acriter pugnatum est, sed nox proelium diremit. Ab utraque
parte sescenti pedites et trecenti equites ceciderunt; sed maior Romanis
iactura fuit, quod equestris ordinis tot viri et tribuni militum quinque et
praefecti sociorum tres sunt interfecti.
</p>
</div>
</div>
</body>
</html>
Comment