CODEWITHSUNDEEP
htmlcss
manoIk
manoIk

Reputation: 61

How do i make my logo to scroll as i scroll?

I am practicing building a website. In the website:http://auchevaldiner.com/new-york/ you can see the logo in the bottom left corner, and when you scroll it scrolls with you what do I have to do in order to get it working like that?

My Code

body {
  margin: 0px;
}

.Main {
  font-size: 0px;
}

.mtx {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 5em;
  color: black;
  left: 550px;
}

.logo_float {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 200px;
  z-index: 1000;
}
<!DOCtype HTML>

<head>
  <html lang="en">
  <meta charset="utf-8">
  <link rel="stylesheet" href="AU.css">
  <title>Au Cheval</title>
  <link rel="stylesheet" href="au.css">
  <link rel="shortcut icon" type="image/jpg" href="favicon.jpg">

</head>

<body>

  <div class="Main">
    <img src="au.images/au.jpg" width="1423px" height="950px" />
    <img src="au.images/au2.jpg" width="1423px" height="950px" />
    <img src="au.images/au3.jpg" width="1423px" height="950px" />
    <img src="au.images/au4.jpg" width="1423px" height="950px" />
    <img src="au.images/au5.jpg" width="1423px" height="950px" />
    <img src="au.images/au6.jpg" width="1423px" height="950px" />
    <img src="au.images/au7.jpg" width="1423px" height="950px" />
    <img src="au.images/au8.jpg" width="1423px" height="950px" />
    <img src="au.images/au9.jpg" width="1423px" height="950px" />
    <img src="au.images/au10.jpg" width="1423px" height="950px" />
    <img src="au.images/au11.jpg" width="1423px" height="950px" />
  </div>

  <a href="AU.html" class="logo_float">
    <img src="au.images/au12.jpg" width="200px" height="200px">
  </a>

</body>

</html>

this is what iam trying to make scroll when i scroll <a href="AU.html" class="logo_float" >

Upvotes: 0

Views: 90

Answers (1)

Mitya
Mitya

Reputation: 34556

You give it position: fixed and then position it to the bottom left, i.e. left: 0; bottom: 0.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Upvotes: 2

Related Questions