I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.
It's supposed to look like this:
[1]: https://i.stack.imgur.com/OADQ6.png
How it looks in a browser:
[2]: https://i.stack.imgur.com/uKHV8.png
I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
}
h1 {
font-size: 32px;
margin: 0;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader
Then using margin to adjust the spacing between the h1 and h2.
Thank you, Damien Puaud!
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin: 120px;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: -100px;
width: 360px;
background: #457b9d;
padding: 7px 25px;
border-radius: 5px;
}
#activities {
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<h3>Top three activities to do at Alver</h3>
<img src="images/le5lrhfv5dygds5nzacn.jpg" />
<img src="images/last ned.jpg" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I did some changes on your code. You can do this also like this:
I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
vertical-align: middle;
display: table-cell;
}
.vertical {
display: table;
margin: 0 auto;
}
h1 {
font-size: 32px;
margin: 15px auto;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
width: 350px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div class="vertical">
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
<!doctype html>
<html>
<head>
<!--Font Link-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!--CSS-->
<link href="SQIStyle.css" rel="stylesheet" type="text/css">
<title>Solarquake Studios</title>
<!--favicon-->
<link rel="icon" type="image/ico" sizes="128x128" href="Logo.ico"/>
<style>
</style>
</head>
<h1>SolarQuake Studios</h1>
<header>
<img src="Logo.ico" alt="logo" width="80" height="80">
</header>
<body>
<div class="container">
<div class="left-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Games</u></h3>
<p>Upcoming Projects</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="center-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Esports</u></h3>
<p>The Hog Pen</p>
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Assets</u></h3>
<p>Game Art & Designs</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© All Rights Reserved.
<p class ="secondary">Follow Us!</p>
<a href="https://www.youtube.com/channel/UChQzAj3OlDO3sqZl7frbY7g"><img src="YTLogo.png"
width="70"
height="70"
alt="logo"></a>
<a href="https://twitter.com/SQdevelopers"><img src="Twitterlogo.png"
width="64"
height="64"
alt="logo"></a>
</div>
</body>
</html>
The sidebar on the left wasn't intended to be here, I've played with container for these columns and the scroll-Div, scroll-BG, and scroll-object classes and haven't gotten anywhere. This is all my css code so far. Thanks in advance.
h1 {
font-size: 40px;
line-height: 62px;
font-family: 'Press Start 2P', cursive;
text-align: center;
color: yellow;
}
h2 {
font-size: 40px;
color: white;
font-family: 'Press Start 2P', cursive;
}
h3 {
color: white;
}
header {
text-align: center;
padding-bottom: 10px;
}
.container div {
box-sizing: border-box;
min-height: 250px;
margin-left: 6.5%;
}
.left-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.right-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.center-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.footer {
clear: both;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
color: yellow;
font-size: 7px;
}
body {
font-size: 20px;
font-family: 'Press Start 2P', cursive;
background-color: white;
background-image: url("Space.png");
}
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
.scroll-div {
background: rgb(0, 0, 0);
height: 400px;
overflow: hidden;
overflow-y: scroll;
text-align: center;
}
.scroll-object {
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
text-align: center;
}
I tried to remove the sidebar on the left, Its yellow. I cant find in my code where its coming from.enter image description here
The yellow sidebar is there because you have a div with a class="scroll-bg"
So, remove the scroll-bg section from your css and its reference from your html.
### Remove ####
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
Working example - https://jsbin.com/wubuqolumo/edit?html,css,output
what a mess.
You are pushing every div from left by giving it a margin of 6.5%.
Change .container div(means every div inside container will have a 6.5% marging from left) to .container and remove margin. And add left right margin in every col class.
I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}
margin: 0;
on the body, it's the default margin.
Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}
Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG
Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
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 :)