Can't make my content ignore the fade-in of background of page

HTML & CSS
1

Hi there everyone!

I’ve managed to create a page with a background image which slowly fades in. The problem I’ve run into is that I can’t place content on the page without it also fading in. Someone was trying to help me and did manage to get me to the point where my text box is working that way but I need a broader solution. I need to place text and other form elements on this page and I need it all to be visible on page load and not fade in like the background image.

Here’s the page in question: https://wheeltastic.com/bg.php

Any thoughts on the matter would be greatly appreciated!

2

Add the image to a separate fixed position element and just fade that in.

Use the technique shown in this old example to place the image and then just add your keyframes to fade it in. It uses :after on the body so it will not affect content as there is no content apart from the image itself.

1 Like
3

Here is that broader solution…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html,body {
    display: table;
    width: 100%;
    height: 100%;
 }

html {
    background-image: url(https://wheeltastic.com/head1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
 }

body {
    display: table-cell;
    vertical-align: middle;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 15s;
    animation-fill-mode:forwards;
 }

#content {
    width: 75%;
    margin: auto;
 }

#content input { 
    display: block;
    margin: auto;
    box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,0.2);
 }

#content img { 
    display: block;
    width: 75%;
    max-width: 18em;
    height: auto;
    margin: 1em auto;
 }

@keyframes fadeIn {
    0% {
        background-color: rgba(255,255,255,1);
    }
    100% {
        background-color: rgba(255,255,255,0.9);
    }
 }
</style>

</head>
<body> 

   <div id="content">
    <h1>Lorem Ipsum</h1>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
      posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
      Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
      sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio.
     </p>
      <input type="text" placeholder="VIN goes here!">
       <img src="https://wheeltastic.com/images/logo-header.png" width="285" height="90" alt="logo">
   </div>

</body>
</html>

coothead

2 Likes
4

Hi there guys and thanks so much for your help!

The solution posted my mr. coothead looks fantastic and I’ll add my bits in to make sure I don’t mess it up but just wanted to post to thank you both for all your help. I’d be completely lost without the assistance :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.