Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Marvin Benno
7,524 PointsBackgroud image gone when the div is position: relative;
Hi guys!
I'm having an issue with my #section-intro. When I am adding the property position: relative; the background Image in the #section-intro is gone. Is this normal when making a div relative or how do I fix this? Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SneakPeak</title>
<link rel="stylesheet" type:="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<header class="float-clearfix sticky">
<div class="float-left">
<a href="#">
<img src="logo.jpg" class="logopic" alt="logo">
</a>
</div>
<navbar class="float-right">
<ul class="navbar">
<a href="#section-mirakler">
<li class="navbar-li">
Mirakler
</li>
</a>
<a href="#section-vittnesbörd">
<li class="navbar-li">
Vittnesbörd
</li>
</a>
<a href="#section-intressantafrågor">
<li class="navbar-li">
Intressanta frågor
</li>
</a>
</ul>
</navbar>
</header>
<main>
<section id="section-intro">
<h1 id="h1-intro">
Välkommen till SneakPeak
</h1>
<h4 id="h4-intro">
"Quote SneakPeak" ex SneakPeak är en hemsida för dig som är nyfiken på vem Jesus är och en sida fylld med inspiration om hur man kan connecta med Gud och få en personlig relation med honom.
</h4>
<div class="intro-absolute">
<h4> #Jesus </h4>
</div>
</section>
<section id="section-mirakler">
<div>
<h2 id="h2-mirakler">
Mirakler
</h2>
<h4 id="h4-mirakler">
"quote om mirakler och det övernaturliga" ex - Det övernaturliga med mirakler och andliga gåvor är en verklighet som inte är så vanlig att höra om kanske i Sverige, men det gör den inte mindre verklig för det. Här är lite demostrationer på hur den andliga världen kan påverka oss och få uttryck i påtagliga tillfällen och upplevelser.
</h4>
</div>
<article class="inline-bilder769 artikel1">
<h5>
Nannas nyopererade knä blir totalt helat
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på Nana som blir helad"> </a>
</article>
<article class="inline-bilder769 artikel2">
<h5>
Tre tjejer blir helade och får uppleva hur personlig Jesus är
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på tre tjejer som får uppleva Jesus "> </a>
</article>
</section>
<section id="section-vittnesbörd">
<div>
<h2 id="h2-vittnesbörd">
Vittnesbörd
</h2>
<h4 id="h4-vittnesbörd">
"quote om vittnesbörd" - Vittnesbörd, att dela storyn om hur man själv kom till punkten att påbörja sin relationen med kärleken själv (Jesus). Bli inspirerad av äkta historier av människor som funnit relationen med Jesus genom livets omständigheter.
</h4>
</div>
<article class="inline-bilder769 artikel1">
<h5>
Miguel Kristianssen
</h5>
<h6>
FD paradise hotel medlem delar sin story om hur inget annat än Jesus mättar
</h6>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på Miguel K"> </a>
</article>
<article class="inline-bilder769 artikel2">
<h5>
Sebastian Stakset
</h5>
<h6>
FD rappare i kartellen delar sin story om hur det endast är Jesus som kan sätta en människa fri helt från insidan och ut.
</h6>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på Sebastian S"> </a>
</article>
</section>
<section id="section-intressantafrågor">
<div>
<h2 id="h2-intressantafrågor">
Intressanta frågor
</h2>
<h4 id="h4-intressantafrågor">
"quote om intressanta - Intressanta frågor består av korta klipp där vi delar svar på väldigt intressanta frågor!
</div>
<article class="inline-bilder769 artikel1">
<h5>
Är Gud arg på dig?
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild Bild på om Gud är arg"> </a>
</article>
<article class="inline-bilder769 artikel2 ">
<h5>
Finns det en mening med ditt liv?
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på om det finns mening i livet"> </a>
</article>
</section>
<section id="section-vän">
<div>
<h2 id="h2-vän">
Om du har blivit <br>vän med Jesus
</h2>
<h4 id="h4-vän">
"Quote om du har blivit vän med Jesus" - Om du tagit ett beslut att bli vän med Jesus och ta emot den gåvan av förlåtelse genom det Jesus gjort på korset så kan du titta på dessa småklipp som förklarar grundläggande delar i relationen med Jesus.
</div>
<article class="inline-bilder769 artikel1">
<h5>
Att vara vän med Jesus
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på vänskap med Jesus"> </a>
</article>
<article class="inline-bilder769 artikel2">
<h5>
Vad betyder begreppet synd?
</h5>
<a href="#"> <img class="articlepic" src="standardpic.jpg" alt="Bild på begreppet synd"> </a>
</article>
</section>
</main>
</div>
</body>
<footer class="float-clearfix">
<div>
<img>
<img>
</div>
<div class="float-left">
<h3>
Maila oss på: Exempel@gmail.com
</h3>
</div>
<div id="copyright" class="float-right">
© All rights reserved
</div>
</footer>
</html>
/* Css stylesheet */
/* Big elements --------------------------------------- */
body {
min-height: calc(100vh - 100px);
}
header {
z-index: 1;
}
header {
background-color: grey;
height: 100px;
}
main {
padding: 10%;
margin-top: 100px; /* margin from header */
}
footer {
background-color: grey;
width:100%;
height:100px;
}
/* div elements ----------------------------------------------- */
span {
}
div {
}
section {
}
article {
}
/* standard elements ---------------------------------- */
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
p {
}
img {
}
a {
color: inherit;
text-decoration: none;
}
navbar {
margin-right: 40px;
}
ul {
}
li {
text-align: center;
}
/* ID's --------------------------------------------- */
#section-intro {
background-image: url(intropic.jpg);
background-repeat: no-repeat;
width: 100%;
height: 300px;
background-size: 100%;
text-align: center;
position: relative;
}
#h1-intro {
font-size: 200%;
}
#h4-intro {
padding: 0px 10px;
font-size: 100%;
}
#section-mirakler {
padding-top:100px;
text-align: center;
}
#section-vittnesbörd {
padding-top:100px;
text-align: center;
}
#section-intressantafrågor {
padding-top:100px;
text-align: center;
}#section-vän {
padding-top:100px;
text-align: center;
}
#copyright {
margin-right: 30px;
margin-top: 45px;
}
/* Classes --------------------------------------- */
}
.intro-absolute {
position: absolute;
bottom: 0;
left: 0;
}
/* Navbar */
.navbar {
list-style-type: none;
}
.navbar-li {
width: 120px;
height: 25px;
background-color: ;
}
.sticky {
position: fixed;
top:0;
width:100%;
}
/* wrap */
.wrap {
}
/* floats */
.float-left {
float:left;
display: inline-block;
}
.float-right {
float:right;
display: inline-block;
}
/* Float clearfix */
.float-clearfix::after {
content: "";
clear: both;
display: table;
}
/* img classes */
}
.logopic {
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 30px;
margin-top: 20px;
}
/* BREAKPOINT */
/* Media Queries ----------------------------------------- */
@media (min-width: 769px) {
/* Big elements --------------------------------------- */
body {
min-height: calc(100vh - 100px);
}
header {
}
header {
background-color: grey;
height: 100px;
}
main {
padding: 10%;
margin-top: 100px; /* margin from header */
}
footer {
background-color: grey;
width:100%;
height:100px;
}
/* div elements ----------------------------------------------- */
span {
}
div {
}
section {
}
article {
}
/* standard elements ---------------------------------- */
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
p {
}
img {
}
a {
color: inherit;
text-decoration: none;
}
navbar {
margin-right: 100px;
}
ul {
}
li {
text-align: center;
}
/* ID's --------------------------------------------- */
#section-intro {
background-image: url(intropic.jpg);
background-repeat: no-repeat;
width: 100%;
height: 800px;
background-size: 100%;
text-align: center;
}
#h1-intro {
font-size: 400%;
}
#h4-intro {
padding: 0px 70px;
font-size: 150%;
}
#section-mirakler {
padding-top:100px;
}
#h2-mirakler,
#h2-vittnesbörd,
#h2-intressantafrågor,
#h2-vän {
font-size: 300%;
}
#h4-mirakler,
#h4-vittnesbörd,
#h4-intressantafrågor,
#h4-vän {
font-size: 135%
}
#section-vittnesbörd {
padding-top:100px;
}
#section-intressantafrågor {
padding-top:100px;
}
#section-vän {
padding-top:100px;
}
#copyright {
margin-right: 80px;
margin-top: 45px;
}
/* Classes --------------------------------------- */
/* SImply a lot of different classes */
.inline-bilder769 {
display:inline-block;
width:250px;
vertical-align: bottom;
}
.artikel1 {
margin-right: 15%;
}
/* Navbar */
.navbar {
list-style-type: none;
}
.navbar-li {
width: 120px;
height: 25px;
background-color: ;
}
.sticky {
position: fixed;
top:0;
width:100%;
}
/* wrap */
.wrap {
}
/* floats */
.float-left-769 {
float:left;
display: inline-block;
}
.float-right-769 {
float:right;
display: inline-block;
}
/* Float clearfix */
.float-clearfix-769::after {
content: "";
clear: both;
display: table;
}
/* img classes */
.articlepic {
width: 300px;
}
.logopic {
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: 100px;
margin-top: 20px;
}
/*---------------------------------------------------------------------*/
/*
programming Log
- Make a little design thing using absolute and relative positioning.
- testa dig fram lite med Z index
* Leka runt lite med flexbox.
- Flex-wrap: wrap osv..
- justify-content: center ...
- flex-grow: ...
- flex-basis:...
*/
3 Answers
Steven Parker
231,261 PointsI'm not able to replicate the issue. The background remains the same with "position: relative;" present or not.
This behavior is consistent with my expectations. The "position" setting should not affect the background.
Marvin Benno
7,524 PointsI guess my text editor is messing with me...
Steven Parker
231,261 PointsOh — I forgot to mention this before, but I noticed that the "footer" comes after the "body". But for proper HTML, all content should be inside the body.
Marvin Benno
7,524 PointsThanks for feedback!