html - Positioning a header image in CSS -
i'm trying use banner created in cs6 illustrator header on website. i'm putting background, setting "top" position , "no-repeat", reason appears @ bottom of header area 300px of padding between image , border of header area. increased height of header area guys can see how far down background image renders...it's positioned below text area, instead of appearing background text (which works fine smaller images).
here's website my company's site
here's css:
@media (min-width: 1420px) { header { font-family: 'djgrossnormal'; text-align:center; font-size:1.3em; font-weight:bold; color: #ff0; background: url(/images/headerimage.png) top no-repeat; positon: relative; bottom: -100px; } .mac header { padding-top:15px; } .win header { margin-right:75px; height:200px; padding-top: 15px; border: solid white 10px; } body { background-color: #cecdb3; padding: 5px; margin: 2px; } footer { height:150px; /* ie10 consumer preview */ background-image: -ms-linear-gradient(top, #c8c99f 60%, #ffffff 100%); /* mozilla firefox */ background-image: -moz-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* opera */ background-image: -o-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* webkit (safari/chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #c8c99f), color-stop(0.9, #ffffff)); /* webkit (chrome 11+) */ background-image: -webkit-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* w3c markup, ie10 release preview */ background-image: linear-gradient(to bottom, #c8c99f 60%, #ffffff 90%); } .win body { background:#ff0; padding: 5px; margin: 2px; } .win .wrapper { font-family:verdana, geneva, sans-serif; height:900px; background-color:#c8c99f; border-bottom:dashed black 5px; border-top: none; border-right:none; border-left: solid black 5px; -moz-border-radius-topright: 40px; -webkit-border-radius-topright: 40px; border-top-right-radius: 40px;} .mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #ff0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left; } a:link { text-decoration: none; color: black; font-family: 'djgrossnormal'; margin-bottom: 100px; font-size: 1.5em; } .homepage {text-align: justify; font-family: 'permanent_markerregular'; font-size:1.1em; font-weight:80; } .navtext { padding-left: 10px; padding-top:15px; } .slideshow { position:relative; right: -18%; } .livecoaching { position: relative; right: -20%; } .seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; font-family:'telex'; } .aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; font-family: 'telex'; } #rightimages { position: relative; float: right; } .contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; } .blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; } .rightcontent { float: right; width: 40%; position: relative; right: -150px; bottom: 770px; background-color: #c8c99f; padding: 2px; -moz-border-radius-topright: 20px; -webkit-border-radius-topright: 20px; border-top-right-radius: 20px; } .win .rightcontent { float: right; width: 40%; position: relative; right: -150px; bottom: 745px; background-color: #c8c99f; color: black; border: solid black 3px; padding: 2px; -moz-border-radius-topright: 20px; -webkit-border-radius-topright: 20px; border-top-right-radius: 20px; } .leftcontent { float:left; width: 60%; position: relative; bottom: -1em; } .win .leftcontent { border: solid black 3px; } .win .leftcontent { background-color:#c8c99f; } .clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;} .coachingintro { position: relative; right: 0.2em; font-family: 'caviardreamsregular'; font-size:1.5em; text-align:center; font-weight: 400; } form { background: url(images/nightclub.png) no-repeat; background-size: cover; font-size: 0.8em; font-weight:300; font-family: verdana, geneva, sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: auto; position: relative; } .win form { background: url(images/nightclub.png) no-repeat; background-size: cover; font-size: 0.8em; font-weight:300; font-family: verdana, geneva, sans-serif; padding:2px; border:solid white 6px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: auto; position: relative; } h3:first-letter { font-family: 'kaushanscriptregular'; font-size: 50px; } h3 { font-family: 'sofia_pro_lightregular'; } article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:helvetica; } a:visited {color:black;} } @media (min-width: 1260px) , (max-width: 1419px) { header { font-family: 'djgrossnormal'; text-align:center; font-size:1.5em; font-weight:bold; color: #ff0; border-bottom: solid white 10px; background: url(/images/headerimage.png) top no-repeat ; height: 500px; } .mac header { padding-top:15px; } .win header { margin-right:75px; font-size:1.9em; height:175px; padding-top: 15px; } body { background-color: #cecdb3; padding: 5px; margin: 2px; } footer { height:150px; /* ie10 consumer preview */ background-image: -ms-linear-gradient(top, #c8c99f 60%, #ffffff 100%); /* mozilla firefox */ background-image: -moz-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* opera */ background-image: -o-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* webkit (safari/chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #c8c99f), color-stop(0.9, #ffffff)); /* webkit (chrome 11+) */ background-image: -webkit-linear-gradient(top, #c8c99f 60%, #ffffff 90%); /* w3c markup, ie10 release preview */ background-image: linear-gradient(to bottom, #c8c99f 60%, #ffffff 90%); } .win body { background:#ff0; padding: 5px; margin: 2px; } .win .wrapper { font-family:verdana, geneva, sans-serif; height:900px; background-color:#c8c99f; border-bottom:dashed black 5px; border-top: none; border-right:none; border-left: solid black 5px; -moz-border-radius-topright: 40px; -webkit-border-radius-topright: 40px; border-top-right-radius: 40px;} .mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #ff0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left; } a:link { text-decoration: none; color: black; font-family: 'djgrossnormal'; margin-bottom: 100px; font-size: 1.5em; } .homepage {text-align: justify; font-family: 'permanent_markerregular'; font-size:1.1em; font-weight:80; } .navtext { padding-left: 10px; padding-top:15px; } .slideshow { position:relative; right: -18%; } .livecoaching { position: relative; right: -20%; } .seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; font-family:'telex'; } .aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; font-family: 'telex'; } #rightimages { position: relative; float: right; } .contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; } .blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #c6c670; } .rightcontent { float: right; width: 40%; position: relative; right: -150px; bottom: 770px; background-color: #c8c99f; padding: 2px; -moz-border-radius-topright: 20px; -webkit-border-radius-topright: 20px; border-top-right-radius: 20px; } .win .rightcontent { float: right; width: 40%; position: relative; right: -150px; bottom: 745px; background-color: #c8c99f; color: black; border: solid black 3px; padding: 2px; -moz-border-radius-topright: 20px; -webkit-border-radius-topright: 20px; border-top-right-radius: 20px; } .leftcontent { float:left; width: 60%; position: relative; bottom: -1em; } .win .leftcontent { border: solid black 3px; } .win .leftcontent { background-color:#c8c99f; } .clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;} .coachingintro { position: relative; right: 0.2em; font-family: 'caviardreamsregular'; font-size:1.5em; text-align:center; font-weight: 400; } form { background: url(images/nightclub.png) no-repeat; background-size: cover; font-size: 0.8em; font-weight:300; font-family: verdana, geneva, sans-serif; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: auto; position: relative; } .win form { background: url(images/nightclub.png) no-repeat; background-size: cover; font-size: 0.8em; font-weight:300; font-family: verdana, geneva, sans-serif; padding:2px; border:solid white 6px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: auto; position: relative; } h3:first-letter { font-family: 'kaushanscriptregular'; font-size: 50px; } h3 { font-family: 'sofia_pro_lightregular'; } article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:helvetica; } a:visited {color:black;} } @media (min-width: 320px) , (max-width: 479px) { header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.3em; } html, body { background-color: #cecdb3; height: 95%; width: 100%; } .wrapper { background-color: #cecdb3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:verdana, geneva, sans-serif; width:60%; height:95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; } .mainnav { border: solid black 4px; width: 30%; float: left; background-color: #ff0; margin-right: 5px; margin-bottom: 5px; position:relative; } a:link { text-decoration: none; color: black; font-family: 'djgrossnormal'; font-size: 0.7em; } article { font-size:0.5em; background-size: contain; position: relative; } } @media (min-width: 480px) , (max-width: 599px) { header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; } html, body { background-color: #cecdb3; width: 100%; height:100%; overflow: hidden; } .wrapper { background-color: #cecdb3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:verdana, geneva, sans-serif; width:75%; height: 90%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; } .mainnav { border: solid black 4px; width: 30%; float: left; background-color: #ff0; margin-right: 5px; margin-bottom: 5px; position:relative; } a:link { text-decoration: none; color: black; font-family: 'djgrossnormal'; font-size: 0.7em; } article { font-size:0.6em; position: relative; } } @media (min-width: 768px) , (max-width: 1258px) { html, body { width:100%; height:1500px;} header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; } body { background-color: #cecdb3; } .wrapper { background-color: #cecdb3; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:verdana, geneva, sans-serif; width:70%; height: 95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; } .mainnav { border: solid black 4px; width: 13%; height: 20%; float: left; background-color: #ff0; margin-right: 5px; margin-bottom: 5px; position:relative; } .navtext { padding-bottom: 15px; } a:link { text-decoration: none; color: black; font-family: 'djgrossnormal'; font-size: 0.9em; } article { font-size:0.8em; position: relative; } } @font-face { font-family: 'sofia_pro_lightregular'; src: url('sofiaprolight-webfont.eot'); src: url('sofiaprolight-webfont.eot?#iefix') format('embedded-opentype'), url('sofiaprolight-webfont.woff') format('woff'), url('sofiaprolight-webfont.ttf') format('truetype'), url('sofiaprolight-webfont.svg#sofia_pro_lightregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'museo_slab500'; src: url('museo_slab_500_2-webfont.eot'); src: url('museo_slab_500_2-webfont.eot?#iefix') format('embedded-opentype'), url('museo_slab_500_2-webfont.woff') format('woff'), url('museo_slab_500_2-webfont.ttf') format('truetype'), url('museo_slab_500_2-webfont.svg#museo_slab500') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'kaushanscriptregular'; src: url('kaushanscript-regular-webfont.eot'); src: url('kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'), url('kaushanscript-regular-webfont.woff') format('woff'), url('kaushanscript-regular-webfont.ttf') format('truetype'), url('kaushanscript-regular-webfont.svg#kaushanscriptregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'caviardreamsregular'; src: url('caviardreams-webfont.eot'); src: url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'), url('caviardreams-webfont.woff') format('woff'), url('caviardreams-webfont.ttf') format('truetype'), url('caviardreams-webfont.svg#caviardreamsregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'caviardreamsbold'; src: url('caviar_dreams_bold-webfont.eot'); src: url('caviar_dreams_bold-webfont.eot?#iefix') format('embedded-opentype'), url('caviar_dreams_bold-webfont.woff') format('woff'), url('caviar_dreams_bold-webfont.ttf') format('truetype'), url('caviar_dreams_bold-webfont.svg#caviardreamsbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'caviardreamsitalic'; src: url('caviardreams_italic-webfont.eot'); src: url('caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'), url('caviardreams_italic-webfont.woff') format('woff'), url('caviardreams_italic-webfont.ttf') format('truetype'), url('caviardreams_italic-webfont.svg#caviardreamsitalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'caviardreamsbolditalic'; src: url('caviardreams_bolditalic-webfont.eot'); src: url('caviardreams_bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('caviardreams_bolditalic-webfont.woff') format('woff'), url('caviardreams_bolditalic-webfont.ttf') format('truetype'), url('caviardreams_bolditalic-webfont.svg#caviardreamsbolditalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'djgrossnormal'; src: url('djgross-webfont.eot'); src: url('djgross-webfont.eot?#iefix') format('embedded-opentype'), url('djgross-webfont.woff') format('woff'), url('djgross-webfont.ttf') format('truetype'), url('djgross-webfont.svg#djgrossnormal') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'luxi_sansregular'; src: url('luxisr-webfont.eot'); src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'), url('luxisr-webfont.woff') format('woff'), url('luxisr-webfont.ttf') format('truetype'), url('luxisr-webfont.svg#luxi_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'blokletters_balpenbalpen'; src: url('blokletters-balpen-webfont.eot'); src: url('blokletters-balpen-webfont.eot?#iefix') format('embedded-opentype'), url('blokletters-balpen-webfont.woff') format('woff'), url('blokletters-balpen-webfont.ttf') format('truetype'), url('blokletters-balpen-webfont.svg#blokletters_balpenbalpen') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ambleregular'; src: url('amble-regular-webfont.eot'); src: url('amble-regular-webfont.eot?#iefix') format('embedded-opentype'), url('amble-regular-webfont.woff') format('woff'), url('amble-regular-webfont.ttf') format('truetype'), url('amble-regular-webfont.svg#ambleregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'daysregular'; src: url('days-webfont.eot'); src: url('days-webfont.eot?#iefix') format('embedded-opentype'), url('days-webfont.woff') format('woff'), url('days-webfont.ttf') format('truetype'), url('days-webfont.svg#daysregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'permanent_markerregular'; src: url('permanentmarker-webfont.eot'); src: url('permanentmarker-webfont.eot?#iefix') format('embedded-opentype'), url('permanentmarker-webfont.woff') format('woff'), url('permanentmarker-webfont.ttf') format('truetype'), url('permanentmarker-webfont.svg#permanent_markerregular') format('svg'); font-weight: normal; font-style: normal; } here's homepage html:
<!doctype html><html lang="en"><head> <link href="http://fonts.googleapis.com/css?family=droid+sans" rel="stylesheet" type="text/css"> <script src="browserselector.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var image1=new image() image1.src="images/slideshow1blurred.jpg" var image2=new image() image2.src="images/slideshow2blurred.jpg" var image3=new image() image3.src="images/slideshow3blurred.jpg" //--> </script> <meta charset="utf-8"> <title> socialadventuring.com </title> <link href="css/socialpolarities.css" rel="stylesheet" type="text/css"> </head><body> <header> <h1> social adventuring dot com </h1> </header> <nav class="mainnav"> <div class="navtext"> <a href="index.html"> home </a> <br> <a href="aboutus.html"> </a> <br> <a href="contact.html"> contact </a> <br> <a href="coaching.html"> coaching </a> <br> <a href="seminars.html"> seminars </a> <br> <a href="blog.html"> blog </a> <br> </div> </nav> <div class="wrapper"> <article class="homepage"> <p> welcome socialadventuring.com! website under construction expect see regular blog updates, news , more on our homepage. in meantime check out our company our products , services geared making kick maximum amount of ass. </p> </article> <div class="slideshow"> <img src="file:///users/alexfalconer-athanassakos/documents/final%20assignment/images/slideshow3blurred.jpg" name="slide" class="theslideshow"> </div> <script type="text/javascript"> <!-- //variable increment through images var step=1 function slideit(){ //if browser not support image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds settimeout("slideit()",4000) } slideit() //--> </script> </div> </body></html>
the image has padding on top.
you can position background using negative values instead of "top".
for instance:
background: url("/images/headerimage.png") no-repeat scroll center -30px transparent;
Comments
Post a Comment