The font-family and font-size of my project are being inherited even when I specify !important.
You can see the issue when you hover over the first link. There's a label in the top right corner, but I want the font to be times new roman, 12px, and white. So completely different than the font from the rest of the project.
However, when I edit the ".album-art .film" CSS selector, which should control the label, the font doesn't change.
https://codepen.io/cjk47/project/live/4fdb73a9558a26a6c1a0a31c6c31705d
.tracks {
margin-top: 46px;
}
li.track {
display: block;
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 5rem;
margin-bottom: 15px;
}
li.track:hover {
color: transparent;
-webkit-text-stroke-color: #18181b;
-webkit-text-stroke-width: 3px;
}
li.track:hover .album-art {
display: block;
}
.album-art {
z-index: -10;
position: fixed;
left: 50%;
top: 50%;
width: 90%;
height: 50%;
max-height: 450px;
display: none;
opacity: 0.5;
overflow: hidden;
transform: translate(-50%,-50%);
}
.album-art img {
width: 100%;
position: relative;
}
.album-art .film {
position: absolute;
top: 5px;
right: 10px;
font-family: "Times New Roman", Times, serif !important;
font-size: 14px;
background: black;
padding: 5px 10px;
color: white !important;
border-radius: 10px;
}
a {
text-decoration: none;
color: inherit;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo">
<img src="/img/logo1.png" height="50" width="50">
</div>
<div class="tracks">
<ol>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/king-princess.png"><span class="film">Film</span></div>
<p class="track-name">King Princess - 'Cheap Queen'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/charly-bliss.png"></div>
<p class="track-name">Charly Bliss - 'Capacity'</p>
</a>
</li>
<li class="track">
<a href="#" class="nav">
<div class="album-art"><img src="/img/julia-jacklin.jpg"></div>
<p class="track-name">Julia Jacklin - 'Good Guy'</p>
</a>
</li>
<ol>
</div>
</body>
I want the label text when hovering over the first link to be times new roman, 12px, and the color white. However, right now when I try to do this, my stylings are being overridden by the default fonts.
Related
At the moment i have a fixed text, and a fixed navbar in my banner.
i would like the text to dissapear after the banner image. the navbar is alright to stay fixed for the entire page. but i would prefer the text to disappear after the image! is there a way to set a boundary for a fixed element. or else is there a way to get the fixed text on the background so it will not appears over my main content but rather behind it. Thanks guy's!!
body {
margin: 0;
padding: 0;
font: font-family: myriad-pro, sans-serif;
position:relative;
}
.text {
display: inline-block;
width: 100%;
text-align: center;
position:fixed;
top: 200px;
color: white;
border-style: none;
border: 0;
padding: 0;
margin: 0;
opacity: 80%;
font-family: myriad-pro, sans-serif;
font-weight: 100;
font-size: 35px;
font-style: italic;
border-style: none;
}
#text2{
margin-left: 200px;
font-weight: 100;
opacity: 60%;
margin-top: -40px;
}
.image {
filter: brightness(40%);
}
li:hover{
background-color: darkgrey;
}
li {
list-style-type: none;
color: aqua;
float: right;
padding-left: 5px;
padding-right: 5px;
margin-top: 17px;
font-family: myriad-pro, sans-serif;
font-weight: lighter;
}
a.list{
color: black;
text-decoration: none;
white-space: 20px;
}
.navbar {
display: inline-block;
text-align: right;
background-color: white;
opacity: 53%;
width: 100%;
position:static;
top: 20%;
border-style: none;
position: fixed;
top: 25px;
width: 100%;
white-space: 80px;
z-index: 9;
}
.logo{
text-align: left;
padding-left: 20px;
margin-top: -11px;
}
.marcel{
display: block;
background-color: antiquewhite;
margin: 250px 250px;
text-align: center;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./test.css">
<link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
<title>Edusolut</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a class="list" href="#"> Home</a></li>
<li><a class="list" href="#"> Service</a></li>
<li><a class="list" href="#"> Contact</a></li>
<li><a class="list" href="#"> Training</a></li>
</ul>
<div class="logo">
<img src="logo3.png" width="120px" />
</div>
</nav>
<div role="banner">
<div class="image">
<img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
</div>
<div class="text">
<h1>Edusolut</h1>
<div id="text2">
<p>Your Education Solution.</p>
</div>
</div>
</div>
</body>
<body id="main">
<div class = "marcel" >
<img src="./marcel.png">
<h3> Netwerk en Trainig consultancy</h3>
Hi I'm creating a header with a full page image, naviagetion ect. Overlaying the image I have text which welcomes the user to the site, shows the address, shows the opening times during the weekdays and the weekend, and also displays the phone number of the business.
However I can't get the content to center on the image, it's stuck on the left hand side. Any idea why this may be the case? I'm trying to center #openingContent, and #addressHours
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h2,
h3,
h4,
h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header {}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li {
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
</div>
</div>
<img src="http://lorempixel.com/200/200" class="fullPageImage mainImage"/>
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
</div>
Add left: 50%; and ´transform: translateX(-50%); to the absolutely positioned #openingContent to move it into the horizontal center of its container:
(BTW: Don't use a closing tag on img elements!)
* {
box-sizing: border-box;
}
html,body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
h2, h3, h4, h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header{
}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li{
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Wake Cup Coffee House | Dublin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Varela+Round|EB+Garamond|Roboto|Neuton|Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="Analytics/analytics.js"></script>
</head>
<body>
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: +1 610-312-9123</span>
</div>
</div>
<img src="http://placehold.it/600x600/fca" class="fullPageImage mainImage">
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="images/coffee.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="images/wifi.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="images/savings.png" class="image">
</section>
</div>
</body>
</html>
If I'm getting your question right then, you should not use <img> for background image. Instead use CSS body { background-image: url("your_image.jpeg"); }
Then align text to center might be by using CSS property text-align: center
Maybe change it like this?
<div class="parent">
<div class="child">
(copy your content here)
</div>
</div>
so that the parent container has a background image, and the child has all the content. And the child is really centered in the parent
.parent {
position: relative;
background-image: url("img/image.png");
background-color: #cccccc;
}
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See https://css-tricks.com/centering-css-complete-guide/
specifically this https://codepen.io/chriscoyier/pen/lgFiq
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
It seems like no matter what I do I just can't get some text with a black background to centre vertically. The problem is that sometimes the text is on one line and sometimes it is on two or even three. I'm trying to get it to automatically adjust but I just can't.
I have tried numerous approaches such as those listed on here.
Here is my code I am trying to centre:
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile1.png" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile2.png" width="96%">
<h3 class="tilewrappertext">1/4 off massages</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile3.png" width="96%">
<h3 class="tilewrappertext">20/3 off hot rocks</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile4.png" width="96%">
<h3 class="tilewrappertext">20/3 off nails</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile5.png" width="96%">
<h3 class="tilewrappertext">Free use of sauna with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile6.png" width="96%">
<h3 class="tilewrappertext">Free use of jacuzzi with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile7.png" width="96%">
<h3 class="tilewrappertext">1/20 off eyes</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile8.png" width="96%">
<h3 class="tilewrappertext">1/20 off hair</h3>
</div>
</li>
</ul>
</div>
The text appears when the image is hovered over.
Since your li is already position relative, you can add the following css rules to the h3 to center it vertically within the li.:
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
Example here: http://codepen.io/nicerhugs/details/dMGMEv/
The top will move the top of the h3 halfway down the li, and the transform will correct for the height of the li itself. Getting rid of the margin will take away that weird mystery space that makes it appear to be lower than it really is.
Just go with the Jess's answer. Here is another method to do this using pseudo element aka ghost element in css.
You have to give absolute position to image. add a :after element to div#tilewrapper and make it display inline-block, also make the h3 tag inline-block and apply vertical-align: middle, it will position vertically middle. Little complicate to understand but anyway Here is the code . :)
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
.infogrid{
margin-top: 50px;
}
img {
max-height: 320px;
position: absolute;
}
div#tilewrapper{
height: 100%;
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
}
div#tilewrapper:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -5px;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="http://1.bp.blogspot.com/-fqGa-MyjVHY/UZPYekbmfHI/AAAAAAAABrg/CC4q0AQsY9o/s320/air-baloon.jpg" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
</ul>
</div>
I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)