Fri, 2015-11-20 04:41
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>
Fri, 2015-11-20 06:23
#1
Not tested
You have this:
body > .workyobody { ...;}
The body element has no child of class "workyobody".
Instead, try
body.workyobody { ...;}
cheers,
gary
Fri, 2015-11-20 21:36
#2
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.