Hello, I'm a beginner who's making a website for the first time. I'm looking at the existing site and making it accordingly for studying.
When I reduced the size of the chrome window, the picture also decreased proportionally. When you reduce the size of the window, the ratio should be as shown in the second picture. (You don't have to worry about the image being different.) It's a different image because it's for studying.)
The third image is the screen before reducing the screen.
<div id="bgd"></div>
<div id="content" class="container-max">
<h1>We are #500 Strong</h1>
<p>Meet our badass, global family of startup founders, mentors, and investors</p>
<a href="#home" id="your-move"><strong>start here</strong></a>
body {
font-family: 'Open Sans', sans-serif;
}
#bgd {
position: absolute;
background-image: url("img/1.jpg");
background-size: 121%;
background-repeat: no-repeat;
top:0;
left:0;
bottom:0;
right:0;
height: auto;
min-height: 1500px;
}
.container-max{
max-width: 1200px;
}
#content {
color: #f2f2f2;
position: relative;
margin-left: 18%;
margin-top: 9.5%;
}
#content h1 {
font-family: "Exo 2","Helvetica Neue",Helvetica,sans-serif;
text-transform: uppercase;
font-weight: 800;
font-size: 74px;
margin: 1.25em 0 0.2em;
letter-spacing: -2px;
}
#content p {
margin: 0 0 1.313em;
font-size: 20px;
font-weight: 300;
}
#content #your-move {
text-decoration: none;
text-transform: uppercase;
color: #f2f2f2;
border: 1px solid #ac1100;
border-color: #b43322;
background-color: #b43322;
display: inline-block;
padding: 19px;
font-size: 19px;
}
#content #your-move:hover {
border-color: #891e1b;
background-color: #891e1b;
}
I just need to meet the following conditions, right?
Please refer to the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*###### This is the CSS option for the image. ######*/
.image{
height: 726px;
background: url(http://s3.amazonaws.com/blog.invisionapp.com/uploads/2016/05/product-strategy-hero.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*###### Until here ######*/
</style>
</head>
<body style="margin: 0px">
<div class="image"`>
</div>
</body>
</html>
Thank you. It helped me a lot If possible, I would like to know how to make the bottom of the cover blank even if the window is further reduced. http://500.co/ I want to put a menu bar at the bottom of the picture. Or should I make a menu bar and overlap the background picture with z-index?
I think it's an additional question, so I'll put the comments here and leave an answer. In fact, the way I write it on the 500.co site may be a little bit different. I think the parts that you see will be the same, so organize them. Note, after all, the height of the image on the start page of the 500.co site looks like the rule image's height = view-port height - navigation bar's height. If this is handled by css, it is as follows. First of all, the navigation bar is 54px high.
height: calc(100vh - 54px);
/* /* vh = viewport height */
And in some cases, the minimum height of the image should be determined
min-height: 200px;
I'm going to stick them together. If you look at the whole code together, it's as follows. I wanted to show you the menu bar (nav) together, so the code got a little longer because I took the bootstrap, but if you ignore the things you're going to ignore, if you look at it slowly, you can see that it's almost the same as the answer I posted earlier, and only the height of the css is different.
<html lang="ko">
<head>
<!-- Ignore the bootstrap code below -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!-- From here, css -->
<style>
body {
margin: 0;
}
.image{
background: url(http://s3.amazonaws.com/blog.invisionapp.com/uploads/2016/05/product- strategy-hero.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
height: calc(100vh - 54px);
min-height: 200px;
}
</style>
</head>
<body>
<!--This is the image -->
<div class="image">
</div>
<!-- This is the bootstrap navigation bar (menu bar) -->
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<!-- This part is about other things -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.