• Locked
2 replies [Last post]
Fri, 2015-11-20 04:41
codeWalrus
codeWalrus's picture
Offline
newbie
Last seen: 4 years 26 weeks ago
Timezone: GMT-5
Joined: 2015-11-20
Posts: 3
Points: 5

Hi. Can someone tell me where I'm having my problem? Thanks.
The css page would be in the same folder as the html page.

CSS:

body { 
	text-align: center;
	}
 
body > .workyobody {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
	background-size: cover;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	z-index: 1;	
}
 
h1 { 
	color: orange;
	font-family: Verdana sans-serif;
	border-radius: 10px;
}
 
 
.h1-bckgrnd {
	position: relative;
	overflow: hidden;
	font-size: 30px;
}
 
.h1-bckgrnd h1 {
	padding: 20px;
	z-index: 2;
}

HTML:

<!doctype html>
<html>
<head>
	<title>HTML Practice </title>
	<link rel="stylesheet" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
 
 
</head>
<body class="workyobody">
 
	<div class="h1-bckgrnd">
		<h1>The world is beautiful </h1>
	</div>	
</body>
</html>

Top
Tags:
Fri, 2015-11-20 06:23
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 25 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9755
Points: 3837

Not tested

You have this:

body > .workyobody {
    ...;}

The body element has no child of class "workyobody".

Instead, try

body.workyobody {
    ...;}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Fri, 2015-11-20 21:36
#2
codeWalrus
codeWalrus's picture
Offline
newbie
Last seen: 4 years 26 weeks ago
Timezone: GMT-5
Joined: 2015-11-20
Posts: 3
Points: 5

Thanks. I not only changed

Thanks.

I not only changed the parent/child relationship, but I discovered that the file path for my image was incorrect.

Top
  • Locked