/    Sign up×
Community /Pin to ProfileBookmark

background image

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!

to post a comment
CSS

9 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumSep 12.2019 — Let's see if I understand you correctly: The background image should cover the regions that are black now, the blue nav on top should remain blue?
Copy linkTweet thisAlerts:
@codyhillSep 12.2019 — @prowriter#1608680 It would be helpful to share to code.
Copy linkTweet thisAlerts:
@JackyNiksonSep 12.2019 — @prowriter#1608680 What platform do you use?

Maybe I can help you...
Copy linkTweet thisAlerts:
@prowriterauthorSep 12.2019 — I was thinking it might be nice to add my flower pattern with less opacity over the black parts and maybe the blue navigation bar too.
Copy linkTweet thisAlerts:
@prowriterauthorSep 12.2019 — I'm using Dreamweaver.
Copy linkTweet thisAlerts:
@prowriterauthorSep 12.2019 — __(Added ... tags ~ MOD)__
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

&lt;title&gt;Julie Carroll&lt;/title&gt;

&lt;link href="test6.css" rel="stylesheet" type="text/css"&gt;

&lt;style media="screen"&gt;

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;
}
}
&lt;/style&gt;

&lt;link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;Julie Carroll&lt;/h1&gt;
&lt;h3&gt;writer + designer + editor&lt;/h3&gt;
&lt;/header&gt;

&lt;nav&gt;
&lt;ul&gt;
&lt;li id="lineabove"&gt;&lt;a class="currentpage"&gt;home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="writing.html"&gt;writing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="design_hockey_ad.html"&gt;design&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="magazine.html"&gt;magazine&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="resume.html"&gt;r&amp;eacute;sum&amp;eacute;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="kudos.html"&gt;kudos&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;

&lt;ul id="gallery"&gt;
&lt;li id="pic1"&gt;&lt;a href="design_hockey_ad.html"&gt;Hamline University&lt;br&gt;hockey advertisement&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic2"&gt;&lt;a href="design_casa_guadalupana_identity.html"&gt;Casa Guadalupana identity&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic3"&gt;&lt;a href="writing.html#pic2"&gt;&lt;i&gt;Hamline Alumni Magazine&lt;/i&gt; feature:&lt;br&gt;Journey to the motherland&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic4"&gt;&lt;a href="design_piper_planner.html"&gt;Hamline University student planner&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic5"&gt;&lt;a href="writing.html#pic1"&gt;&lt;i&gt;Hamline Alumni Magazine&lt;/i&gt; feature:&lt;br&gt;Unlocking creativity&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic6"&gt;&lt;a href="design_magazine_spreads.html"&gt;&lt;i&gt;Hamline Alumni Magazine&lt;/i&gt;&lt;br&gt;feature spreads&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic7"&gt;&lt;a href="design_book.html"&gt;Children's book&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic8"&gt;&lt;a href="writing.html#pic3"&gt;&lt;i&gt;Hamline Alumni Magazine&lt;/i&gt; feature:&lt;br&gt;If bones could talk&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic9"&gt;&lt;a href="design_mda_poster.html"&gt;Muscular Dystrophy Association&lt;br&gt;poster&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic10"&gt;&lt;a href="writing.html#pic4"&gt;Hamline Strong, Piper Proud&lt;br&gt;insider's guide&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic11"&gt;&lt;a href="design_photo_direction.html"&gt;Photo direction&lt;/a&gt;&lt;/li&gt;
&lt;li id="pic12"&gt;&lt;a href="design_sell_sheets.html"&gt;Hamline School of Business&lt;br&gt;sell sheets&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;footer&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&amp;copy; 2019 Julie Carroll. All rights reserved.&lt;br&gt;Website by Julie Carroll
&lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@SempervivumSep 12.2019 — When I add a background-image to the body CSS, it covers everything.[/quote]
For me it doesn't. For simplicity I used your flower pattern `images/pattern.jpg`. When doing so I encountered an issue with the font color: Readability of blue and black letters was poor. After changing the font color to white everything was fine:

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-09-12/1568316076-861627-background-image.png]
Copy linkTweet thisAlerts:
@KeverSep 12.2019 — When you apply the following CSS edits, it will work, You'll get the best look when you edit your pattern image to also repeat vertically.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;
}
Copy linkTweet thisAlerts:
@prowriterauthorSep 12.2019 — Thank you!
×

Success!

Help @prowriter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...