Menu
I’d like to add a background image to my website where the black background appears at the top and bottom of this page: juliecarroll.net/portfolio.html, but nothing I’ve tried works. When I add a background-image to the body CSS, it covers everything. I’d appreciate any help. Thanks!
...
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Julie Carroll</title>
<link href="test6.css" rel="stylesheet" type="text/css">
<style media="screen">
html body {
margin:30px 0px;
padding:0px;
background:#000;
}
#gallery {
width:100%;
margin:0px;
padding:0;
list-style-type:none;
z-index: 999;
}
#gallery li {
position:relative;
float:left;
margin:0%;
box-sizing:border-box;
background-size:100%;
}
#gallery li a {
opacity: 0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:50% 0%;
box-sizing:border-box;
font-size:75%;
color:#fff;
font-weight:700;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align:center;
text-decoration:none;
background-image:url(images/pattern.jpg);
background-size:100%;
transition:.5s ease-in-out;
}
#gallery li:hover a {
opacity: 1;
}
#pic1 { background-image:url("images/hockey_ad_crop.jpg"); }
#pic2 { background-image:url(images/casa_crop600.jpg); }
#pic3 { background-image:url("images/rwanda_crop.jpg"); }
#pic4 { background-image:url(images/piper_planner_crop.jpg); }
#pic5 { background-image:url("images/stillwater_crop.jpg"); }
#pic6 { background-image:url(images/magazine_spreads_crop.jpg); }
#pic7 { background-image:url(images/book_crop.jpg); }
#pic8 { background-image:url("images/forensics_crop.jpg"); }
#pic9 { background-image:url("images/mda_crop600.jpg"); }
#pic10 { background-image:url(images/insiders_guide_crop.jpg); }
#pic11 { background-image:url(images/photo_direction_crop.jpg); }
#pic12 { background-image:url(images/sell_sheets_crop.jpg); }
a{
text-decoration:none;
color:inherit;
}
@media screen and (max-width : 3500px ){
#gallery li {
width:25%;
padding-top:25%;
}
nav a{
font-size:14px;
}
header h1{
font-size:56px;
}
header h3{
font-size:20px;
}
header{
height:130px;
padding-top:38px;
}
}
@media screen and (max-width : 1200px ){
#gallery li {
width:33.33%;
padding-top:33.33%;
}
nav a{
font-size:13px;
}
header h1{
font-size:50px;
}
header h3{
font-size:17px;
}
header{
height:120px;
padding-top:38px;
}
}
@media screen and (max-width : 800px ){
#gallery li {
width:50%;
padding-top:50%;
}
nav a{
font-size:12px;
}
header h1{
font-size:48px;
}
header h3{
font-size:16px;
}
header{
height:110px;
padding-top:32px;
}
}
@media screen and (max-width : 700px ){
html body {
margin:0px;
}
nav ul {
position:relative;
overflow:hidden;
}
nav li {
float:none;
border:solid white;
border-width:0px 0px 1px 0px;
}
#lineabove {
border-width:1px 0px 1px 0px;
}
nav a {
width:100%;
text-align:left;
padding-left:30px;
font-size:12px;
}
nav a:hover {
width: 100%;
text-align:left;
padding-left:30px;
}
.currentpage {
color:black;
background-color:#c2c2c2;
width:100%;
text-align:left;
padding-left:30px;
}
header h1{
font-size:46px;
}
header h3{
font-size:15px;
}
header{
height:110px;
padding-top:36px;
}
}
@media screen and (max-width : 400px ){
.currentpage{
color:black;
background-color:#c2c2c2;
width:100%;
text-align:left;
padding-left:30px;
}
<i> </i>nav a {
<i> </i>width:100%;
<i> </i>text-align:left;
<i> </i>padding-left:30px;
<i> </i>font-size:12px;
}
nav a:hover {
width: 100%;
text-align:left;
padding-left:30px;
}
#gallery li {
width:100%;
padding-top:100%;
}
header h1{
font-size:46px;
}
header h3{
font-size:15px;
}
header{
height:110px;
padding-top:36px;
}
}
</style>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body>
<header>
<h1>Julie Carroll</h1>
<h3>writer + designer + editor</h3>
</header>
<nav>
<ul>
<li id="lineabove"><a class="currentpage">home</a></li>
<li><a href="writing.html">writing</a></li>
<li><a href="design_hockey_ad.html">design</a></li>
<li><a href="magazine.html">magazine</a></li>
<li><a href="resume.html">r&eacute;sum&eacute;</a></li>
<li><a href="kudos.html">kudos</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
<ul id="gallery">
<li id="pic1"><a href="design_hockey_ad.html">Hamline University<br>hockey advertisement</a></li>
<li id="pic2"><a href="design_casa_guadalupana_identity.html">Casa Guadalupana identity</a></li>
<li id="pic3"><a href="writing.html#pic2"><i>Hamline Alumni Magazine</i> feature:<br>Journey to the motherland</a></li>
<li id="pic4"><a href="design_piper_planner.html">Hamline University student planner</a></li>
<li id="pic5"><a href="writing.html#pic1"><i>Hamline Alumni Magazine</i> feature:<br>Unlocking creativity</a></li>
<li id="pic6"><a href="design_magazine_spreads.html"><i>Hamline Alumni Magazine</i><br>feature spreads</a></li>
<li id="pic7"><a href="design_book.html">Children's book</a></li>
<li id="pic8"><a href="writing.html#pic3"><i>Hamline Alumni Magazine</i> feature:<br>If bones could talk</a></li>
<li id="pic9"><a href="design_mda_poster.html">Muscular Dystrophy Association<br>poster</a></li>
<li id="pic10"><a href="writing.html#pic4">Hamline Strong, Piper Proud<br>insider's guide</a></li>
<li id="pic11"><a href="design_photo_direction.html">Photo direction</a></li>
<li id="pic12"><a href="design_sell_sheets.html">Hamline School of Business<br>sell sheets</a></li>
</ul>
<footer>
<br>
<br>
<br>
<br>
&copy; 2019 Julie Carroll. All rights reserved.<br>Website by Julie Carroll
</footer>
</body>
</html>
When I add a background-image to the body CSS, it covers everything.[/quote]
images/pattern.jpg
`html body
REMOVE background: #000;
ADD background: url(images/pattern.jpg);
nav ul {
REMOVE background-color: #00aeef;
ADD background-color: rgba(0, 174, 239, .8);
nav a {
REMOVE background: #00aeef;
#gallery li a
REMOVE background-image: url(images/pattern.jpg);
footer
REMOVE background-color: #000;
ADD #gallery li:hover {
background: none;
}