Positioning a header image in CSS

StackOverflow https://stackoverflow.com/questions/18264271

  •  24-06-2022
  •  | 
  •  

Pregunta

I'm trying to use a banner that I created in CS6 Illustrator as a header on my website. I'm putting it as a background, setting it to "top" position and "no-repeat", but for some reason it appears at the bottom of the header area with like 300px of padding between the image and border of the header area. I increased the height of the header area so that you guys can see how far down the background image renders...it's positioned below the text area, instead of appearing as a background for the text (which works fine with smaller images).

Here's my website My Company's Site

Here's my 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) and (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) and (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) and (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) and (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 my 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"> ABOUT US </a> <br>
        <a href="contact.html"> CONTACT US </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 to socialadventuring.com! The website is currently under construction but expect to see regular blog updates, news and more on our homepage. In the meantime check out what our company is about as well as our products and services geared to making you kick the 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 that will increment through the images
var step=1
function slideit(){
//if browser does not support the 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>
¿Fue útil?

Solución

The image itself has a padding on its top.

You can position the background using negative values instead of just "top".

For instance:

  background: url("/images/HeaderImage.png") 
       no-repeat scroll center -30px transparent;
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top