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
Qasim Hafeez
12,731 PointsHelp with my project?
I decide to make a website for my barber. It's not finished and I haven't made it responsive yet but I've come across an issue. The background image doesn't always show up in iOS. On Safari and Chrome on my desktop, it works fine. I've looked at a bunch of solutions on StackOverflow but none have worked for me. If someone could look at it and see if they can figure it out, I'd be very grateful.
Here is the url: http://176.32.230.251/qhafeezdomain.com/JackieSite2/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="Haircuts, hair salon, shampoo, nails, salon, barber, senior discount">
<meta name="author" content="">
<title>Fresh Cuts by Jackie</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>Fresh Cuts</h1>
<button class="button">☰</button>
</div>
</header>
<ul class="collapse">
<a href=""><li>Services</li></a>
<a href=""><li>Hours</li></a>
<a href=""><li>Location</li></a>
</ul>
<div id="mainpic">
<h1>Fresh Cuts</h1>
<img id="downButton" src="downarrow.svg" />
</div>
<div class="wrap">
<div class="container">
<div id="services">
<h1>Services</h1>
<img alt="Woman having hair shampooed by stylist" src="shampoo.jpg"/>
<p>We offer services for women, men, children and seniors. Services include haircuts, nails, etc. Tap the button below for a full list of services</p>
<input type="button" id="showServ" value="Show Services"/>
<div id="serviceWrap">
<div class="clearfix">
<p class="servType "><span>Hair Cuts</span><img src="hairdresser2.jpg"/></p>
<p class="serv"><span>Women's Shampoo & Cut</span></p><p class="price"><span>$20.00</span></p>
<p class="serv"><span>Men's Cut</span></p><p class="price"><span>$15.00</span></p>
<p class="serv"><span>Senior Women's Cut</span></p><p class="price"><span>$18.00</span></p>
<p class="serv"><span>Senior Men's Cut</span></p><p class="price"><span>$13.00</span></p>
</div>
<div class="clearfix">
<p class="servType "><span>Color Services</span></p>
<p class="serv"><span>Root Touch-Up</span></p><p class="price"><span>$40 and up</span></p>
<p class="serv"><span>Full Color</span></p><p class="price"><span>$55 and up</span></p>
<p class="serv"><span>Partial Highlights</span></p><p class="price"><span>$55 and up</span></p>
<p class="serv"><span>Full Highlights (Same price for lowlights)</span></p><p class="price"><span>$75 and up</span></p>
<p class="serv"><span>Balayage</span></p><p class="price"><span>$85 and up</span></p>
<p class="serv"><span>Fantasy Colors</span></p><p class="price"><span>$80 and up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Keratin Treatment</span></p>
<p class="serv"><span>Milano's Alfa Part of Belicima</span></p><p class="price"><span>$60 per ounce</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Extensions</span></p>
<p class="serv"><span>Microbraid with Weft</span></p><p class="price"><span>$35 per track and up</span></p>
<p class="serv"><span>I tip or U tip</span></p><p class="price"><span>$400 and up</span></p>
<p class="serv"><span>Tape</span></p><p class="price"><span>$30 per track and up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Treatments</span></p>
<p class="serv"><span>Deep Conditioner</span></p><p class="price"><span>$15</span></p>
<p class="serv"><span>Shine Glaze</span></p><p class="price"><span>$25</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Permanent</span></p>
<p class="serv"><span>Permanent</span></p><p class="price"><span>$50 & up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Style & Bridal</span></p>
<p class="serv"><span>Blow Dry</span></p><p class="price"><span>$30 & up</span></p>
<p class="serv"><span>Formal Up do</span></p><p class="price"><span>$40 & up</span></p>
<p class="serv"><span>Make up</span></p><p class="price"><span>$25 & up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Nails</span></p>
<p class="serv"><span>Manicure</span></p><p class="price"><span>$12 (Spa $15) </span></p>
<p class="serv"><span>Pedicure</span></p><p class="price"><span>$25 (Spa $30)</span></p>
<p class="serv"><span>Mani & Pedi</span></p><p class="price"><span>$35 ($25 on Tuesdays only)</span></p>
</div>
</div>
</div>
<div id="hours">
<h1>Hours</h1>
<div class="clearfix">
<p class="serv"><span>Monday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Tuesday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Wednesday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Thursday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Friday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Saturday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Sunday</span></p><p class="price"><span>Closed</span></p>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$('document').ready(function(){
var windowHeight = function() {
if($(window).width()< 800) {
$("#mainpic").height($(window).height()-$('header').height());
} else {
$('#mainpic').height(700);
}
};
windowHeight();
$(window).on('resize', windowHeight);
$('header button').click(function(){
$('.collapse').slideToggle();
});
$('#downButton').click(function(){
$('body').animate({scrollTop:$('#services').offset().top}, 700);
});
$('#showServ').click(function(){
if($('#showServ').val()==='Show Services'){
$('#showServ').val('Hide Services');
} else{
$('#showServ').val('Show Services');
}
$('#serviceWrap').slideToggle(800);
});
});
</script>
</html>
* {
box-sizing: border-box; }
.clearfix:after {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both; }
header {
position: relative;
background: lightgreen;
height: 50px; }
header .container {
padding-top: 10px;
margin: 0 auto;
width: 95%; }
header h1 {
margin: 0;
color: white;
display: inline-block; }
header button {
float: right;
background: none;
font-weight: bold;
border: none;
color: white;
padding: 0;
background: #64e764;
font-size: 2em;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px; }
.collapse {
position: relative;
z-index: 1000;
background: lightgreen;
display: none;
margin: 0;
text-align: center;
padding-left: 0; }
.collapse a:link {
text-decoration: none; }
.collapse li {
padding-top: 20px;
padding-bottom: 20px;
list-style: none;
color: white;
border-top: 1px solid white; }
#mainpic {
background: url("../hairdresser.png");
background-color: #bcf5bc;
background-size: cover;
background-attachment: scroll;
background-position: center center;
position: relative;
color: white; }
#mainpic h1 {
position: relative;
text-align: center;
margin: 0;
top: 50%; }
#mainpic img {
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
transition: background-color 1s; }
#mainpic img:hover {
background-color: red; }
.wrap {
background: #bcf5bc;
color: white; }
.wrap .container {
width: 95%;
margin: 0 auto; }
.wrap .container h1 {
margin: 0;
padding-top: 20px;
text-align: center;
color: white; }
.wrap .container #services img, .wrap .container #hours img {
width: 100%;
border-radius: 5px; }
.wrap .container #services p, .wrap .container #hours p {
text-align: center;
background: #64e764;
padding: 0;
border-radius: 5px; }
.wrap .container #services #showServ, .wrap .container #hours #showServ {
width: 180px;
height: 50px;
display: block;
margin: 0 auto;
background: #38e038;
border: white solid 3px;
color: white;
border-radius: 5px; }
.wrap .container #services #serviceWrap, .wrap .container #hours #serviceWrap {
display: none; }
.wrap .container #services .servType, .wrap .container #hours .servType {
width: 100%;
background: lightgreen;
text-align: center;
border: solid white 1px;
border-radius: 5px;
height: 40px;
display: table;
position: relative;
overflow: hidden; }
.wrap .container #services .servType span, .wrap .container #hours .servType span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .servType img, .wrap .container #hours .servType img {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
position: absolute;
right: 0;
top: 0;
height: 40px;
float: right;
width: 15%; }
.wrap .container #services .serv, .wrap .container #hours .serv {
text-align: center;
margin: 0;
display: table;
width: 69%;
border-radius: 5px;
border: 1px solid white;
float: left;
background: #64e764;
height: 60px;
margin-bottom: 2px;
margin-right: 1%; }
.wrap .container #services .serv span, .wrap .container #hours .serv span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .serv:active, .wrap .container #hours .serv:active {
background: #1ec71e; }
.wrap .container #services .price, .wrap .container #hours .price {
text-align: center;
margin: 0;
width: 30%;
display: inline-block;
border-radius: 5px;
float: left;
background: #64e764;
height: 60px;
margin-bottom: 2px;
display: table;
border: 1px solid white; }
.wrap .container #services .price span, .wrap .container #hours .price span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .price:active, .wrap .container #hours .price:active {
background: #1ec71e; }
/*# sourceMappingURL=style.css.map */
Qasim Hafeez
12,731 PointsOn the same iOS device and JS is enabled. It's strange. I've tried so many different things. Sometimes after making a change and it will work for a little bit and then it simply won't appear. Loading the image with JS was suggested on a similar StackOverflow question but it didn't help. Earlier today I got it work and didn't make any changes after that. About 30 minutes later I went to the site on my phone and it was not working. It's strange.
2 Answers
Joe Consterdine
13,965 PointsFirst of all, using javascript to resize the background image is silly. Just use CSS.
I've removed the javascript and edited the css.
Try the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="Haircuts, hair salon, shampoo, nails, salon, barber, senior discount">
<meta name="author" content="">
<title>Fresh Cuts by Jackie</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>Fresh Cuts</h1>
<button class="button">☰</button>
</div>
</header>
<ul class="collapse">
<a href=""><li>Services</li></a>
<a href=""><li>Hours</li></a>
<a href=""><li>Location</li></a>
</ul>
<div id="mainpic">
<h1>Fresh Cuts</h1>
<img id="downButton" src="downarrow.svg" />
</div>
<div class="wrap">
<div class="container">
<div id="services">
<h1>Services</h1>
<img alt="Woman having hair shampooed by stylist" src="shampoo.jpg"/>
<p>We offer services for women, men, children and seniors. Services include haircuts, nails, etc. Tap the button below for a full list of services</p>
<input type="button" id="showServ" value="Show Services"/>
<div id="serviceWrap">
<div class="clearfix">
<p class="servType "><span>Hair Cuts</span><img src="hairdresser2.jpg"/></p>
<p class="serv"><span>Women's Shampoo & Cut</span></p><p class="price"><span>$20.00</span></p>
<p class="serv"><span>Men's Cut</span></p><p class="price"><span>$15.00</span></p>
<p class="serv"><span>Senior Women's Cut</span></p><p class="price"><span>$18.00</span></p>
<p class="serv"><span>Senior Men's Cut</span></p><p class="price"><span>$13.00</span></p>
</div>
<div class="clearfix">
<p class="servType "><span>Color Services</span></p>
<p class="serv"><span>Root Touch-Up</span></p><p class="price"><span>$40 and up</span></p>
<p class="serv"><span>Full Color</span></p><p class="price"><span>$55 and up</span></p>
<p class="serv"><span>Partial Highlights</span></p><p class="price"><span>$55 and up</span></p>
<p class="serv"><span>Full Highlights (Same price for lowlights)</span></p><p class="price"><span>$75 and up</span></p>
<p class="serv"><span>Balayage</span></p><p class="price"><span>$85 and up</span></p>
<p class="serv"><span>Fantasy Colors</span></p><p class="price"><span>$80 and up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Keratin Treatment</span></p>
<p class="serv"><span>Milano's Alfa Part of Belicima</span></p><p class="price"><span>$60 per ounce</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Extensions</span></p>
<p class="serv"><span>Microbraid with Weft</span></p><p class="price"><span>$35 per track and up</span></p>
<p class="serv"><span>I tip or U tip</span></p><p class="price"><span>$400 and up</span></p>
<p class="serv"><span>Tape</span></p><p class="price"><span>$30 per track and up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Treatments</span></p>
<p class="serv"><span>Deep Conditioner</span></p><p class="price"><span>$15</span></p>
<p class="serv"><span>Shine Glaze</span></p><p class="price"><span>$25</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Permanent</span></p>
<p class="serv"><span>Permanent</span></p><p class="price"><span>$50 & up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Style & Bridal</span></p>
<p class="serv"><span>Blow Dry</span></p><p class="price"><span>$30 & up</span></p>
<p class="serv"><span>Formal Up do</span></p><p class="price"><span>$40 & up</span></p>
<p class="serv"><span>Make up</span></p><p class="price"><span>$25 & up</span></p>
</div>
<div class="clearfix">
<p class="servType"><span>Nails</span></p>
<p class="serv"><span>Manicure</span></p><p class="price"><span>$12 (Spa $15) </span></p>
<p class="serv"><span>Pedicure</span></p><p class="price"><span>$25 (Spa $30)</span></p>
<p class="serv"><span>Mani & Pedi</span></p><p class="price"><span>$35 ($25 on Tuesdays only)</span></p>
</div>
</div>
</div>
<div id="hours">
<h1>Hours</h1>
<div class="clearfix">
<p class="serv"><span>Monday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Tuesday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Wednesday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Thursday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Friday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Saturday</span></p><p class="price"><span>10AM - 4PM</span></p>
<p class="serv"><span>Sunday</span></p><p class="price"><span>Closed</span></p>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$('document').ready(function(){
$('header button').click(function(){
$('.collapse').slideToggle();
});
$('#downButton').click(function(){
$('body').animate({scrollTop:$('#services').offset().top}, 700);
});
$('#showServ').click(function(){
if($('#showServ').val()==='Show Services'){
$('#showServ').val('Hide Services');
} else{
$('#showServ').val('Show Services');
}
$('#serviceWrap').slideToggle(800);
});
});
</script>
</html>
* {
box-sizing: border-box; }
.clearfix:after {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both; }
header {
position: relative;
background: lightgreen;
height: 50px; }
header .container {
padding-top: 10px;
margin: 0 auto;
width: 95%; }
header h1 {
margin: 0;
color: white;
display: inline-block; }
header button {
float: right;
background: none;
font-weight: bold;
border: none;
color: white;
padding: 0;
background: #64e764;
font-size: 2em;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px; }
.collapse {
position: relative;
z-index: 1000;
background: lightgreen;
display: none;
margin: 0;
text-align: center;
padding-left: 0; }
.collapse a:link {
text-decoration: none; }
.collapse li {
padding-top: 20px;
padding-bottom: 20px;
list-style: none;
color: white;
border-top: 1px solid white; }
#mainpic {
background: url("../hairdresser.png");
background-color: #bcf5bc;
background-size: cover;
height: 800px;
background-position: center center;
position: relative;
color: white; }
@media(min-width: 800px) {
#mainpic {
height: 800px;
}
}
#mainpic h1 {
position: relative;
text-align: center;
margin: 0;
top: 50%; }
#mainpic img {
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
transition: background-color 1s; }
#mainpic img:hover {
background-color: red; }
.wrap {
background: #bcf5bc;
color: white; }
.wrap .container {
width: 95%;
margin: 0 auto; }
.wrap .container h1 {
margin: 0;
padding-top: 20px;
text-align: center;
color: white; }
.wrap .container #services img, .wrap .container #hours img {
width: 100%;
border-radius: 5px; }
.wrap .container #services p, .wrap .container #hours p {
text-align: center;
background: #64e764;
padding: 0;
border-radius: 5px; }
.wrap .container #services #showServ, .wrap .container #hours #showServ {
width: 180px;
height: 50px;
display: block;
margin: 0 auto;
background: #38e038;
border: white solid 3px;
color: white;
border-radius: 5px; }
.wrap .container #services #serviceWrap, .wrap .container #hours #serviceWrap {
display: none; }
.wrap .container #services .servType, .wrap .container #hours .servType {
width: 100%;
background: lightgreen;
text-align: center;
border: solid white 1px;
border-radius: 5px;
height: 40px;
display: table;
position: relative;
overflow: hidden; }
.wrap .container #services .servType span, .wrap .container #hours .servType span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .servType img, .wrap .container #hours .servType img {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
position: absolute;
right: 0;
top: 0;
height: 40px;
float: right;
width: 15%; }
.wrap .container #services .serv, .wrap .container #hours .serv {
text-align: center;
margin: 0;
display: table;
width: 69%;
border-radius: 5px;
border: 1px solid white;
float: left;
background: #64e764;
height: 60px;
margin-bottom: 2px;
margin-right: 1%; }
.wrap .container #services .serv span, .wrap .container #hours .serv span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .serv:active, .wrap .container #hours .serv:active {
background: #1ec71e; }
.wrap .container #services .price, .wrap .container #hours .price {
text-align: center;
margin: 0;
width: 30%;
display: inline-block;
border-radius: 5px;
float: left;
background: #64e764;
height: 60px;
margin-bottom: 2px;
display: table;
border: 1px solid white; }
.wrap .container #services .price span, .wrap .container #hours .price span {
display: table-cell;
vertical-align: middle; }
.wrap .container #services .price:active, .wrap .container #hours .price:active {
background: #1ec71e; }
/*# sourceMappingURL=style.css.map */
Qasim Hafeez
12,731 PointsI tried your code, didn't work. Just the background color appears. I resolved the issue by using an <img> tag with absolute positioning. In the desktop view I'll hide the <img> and use background-size:cover. I've seen this technique used on other sites.
Joe Consterdine
13,965 PointsYou can't have copied it right it definitely works.
There's no reason to use position absolute on images for this purpose.
But as you like.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherThis isn't an answer, but is it not loading only occasionally on the same iOS device? Or will it always load on one device and not another? Your main picture is being loaded by JavaScript, and it's possible that if it's the latter scenario that JavaScript has been disabled on that device.