CODEWITHSUNDEEP
htmlcss
ConfusedDreamweaverUser
ConfusedDreamweaverUser

Reputation: 53

fading image over background image

Building a quick website. Ideally, I want it to look similar to this: https://i.sstatic.net/PxEL6.jpg

Where, the hawaii background image is faded in at the start (and stays faded with an opacity of 0.2) & the rectangle in the middle fades in with the title and buttons but displays fully after the background image.

They'd be two seperate images (background #1 and rectangle #2) - how would I'd be best to do this with HTML/CSS? I have the background image working but the rectangle doesn't fade in and show. I'd like to have the buttons also link to pages (unsure how to do this)

Also having trouble finding the best way to resize my page to fit with the browser? I know it's alt tags but I can't remember the exact code needed.

I'm a noob and having trouble finding sufficient code to fulfil my request.

Cheers

CODE BELOW:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>

<body>
 <img src = "bkgd.jpg" alt=""/>

 <img src="backdrop.png" width="1920" height="1080" alt=""/> 

 </body>
 </html>

CSS:

 @charset "UTF-8";
 /* CSS Document */

 html, body {

     height: 100%;
     margin: 0;
     padding: 0;
     background-size: auto;

 }

  img {
     opacity: 0.5;
     background-repeat: no-repeat;
     background-position: center;
     margin-right: auto;
     margin-left: auto;
     background-attachment: fixed;


     /*Fade In Animation*/
     -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadein 2s; /* Firefox < 16 */
          -ms-animation: fadein 2s; /* Internet Explorer */
          -o-animation: fadein 2s; /* Opera < 12.1 */
             animation: fadein 2s;
 }

 @keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 /* Firefox < 16 */
 @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.5; }
 }

 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 /* Internet Explorer */
 @-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 0.5; }
 }

 /* Opera < 12.1 */
 @-o-keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.5; }
 }

 }

Upvotes: 0

Views: 399

Answers (1)

Geethu Jose
Geethu Jose

Reputation: 1993

Try this. I have added sample images. The first image is set as body background and the fading image is set as a div background.

To place the fading image in the middle of the page, use

display: flex;
justify-content: center;
align-items: center;

To make the background image fit to screen width, use 

width: 100vw;
height: 100vh;


/* Body Margin*/

body {
  margin: 0;
}


/* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}


/* Background Div: after*/

.background:after {
  position: absolute;
  width: 100vw;
  height: 100vh;
  content: '';
  background-image: url("https://www.ncl.com/sites/default/files/DestinationGalleries.Hawaii.SnorkelingBay900x400.jpg");
  background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
  background-color: #999;
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  /*Fade In Animation*/
}


/* Fade in animations */

@keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  opacity: 0.2;
}

to {
  opacity: 1;
}


/* Foregraound div */

.foreground {
  margin-top: 20px;
  position: relative;
  width: 400px;
  height: 100px;
  background-color: #eaeaea;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 10px;
  /*Fade In Animation*/
  -webkit-animation: fadein 10s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s;
  /* Firefox < 16 */
  -ms-animation: fadein 10s;
  /* Internet Explorer */
  -o-animation: fadein 10s;
  /* Opera < 12.1 */
  animation: fadein 10s;
  z-index: 1;
}


/* Name Tag */

.name-tag {
  font-family: 'avenir-light';
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
}


/* Socail Media List*/

.social-media-list {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}


/* Socail Media Item*/

.social-media-link img {
  height: 50px;
  width: 50px;
  transition: all 0.5s ease;
}

.social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari */
  transform: scale(1.2);
  /* Standard syntax */
}
<section class="background">
  <div class="foreground">
    <div class="name-tag">lorem ipsum
    </div>
    <ul class="social-media-list">
      <li class="social-media-link">
        <a href="https://twitter.com/"><img src="https://cdn3.iconfinder.com/data/icons/basicolor-reading-writing/24/077_twitter-128.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://in.linkedin.com/"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
      </li>
      <li class="social-media-link">
        <a href="https://www.instagram.com/"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
      </li>
    </ul>
  </div>
</section>

Upvotes: 1

Related Questions