Background-image not 100%
Question
I want to create something like that: Page
With some help the result is at the momemnt that: MyPage . I dont want that the background-image is 100%. I want only the real high. How can change that? I tried alot, but it wont work :/
Here is my markup:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
<!-- Open Sans -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 1</a>
</li>
</ul>
</nav>
<div class="content">
<h1></h1>
</div>
</body>
</html>
Demo
* { font-family: "Open Sans"; margin: 0px; padding: 0px; font-size: 18px; } html { height: 100%; } body { height: 100%; background: url(https://c1.staticflickr.com/9/8226/8557105873_a82c51f03f_z.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } nav { background: url("images/line-header.png") repeat-x scroll center bottom #4A525A; padding: 15px; position: fixed; top: 0px; width: 100%; } nav > ul { margin: 0px; padding: 0px; text-align: center; } nav ul > li { margin-left: 25px; display: inline-block; list-style-type: none; } nav ul li > a { display: block; text-decoration: none; color: black; color: #697683; transition: color 0.5s; } nav ul li > a:hover { color: #FFF; } .content { height: 1000px; margin-top: 500px; background-color: orange; }
<!-- Open Sans --> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <nav> <ul> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 1</a> </li> </ul> </nav> <div class="content"> <h1></h1> </div>
3 answers
solution1
1 2015-01-01 03:04:17
Just set margin-top on .content to 100% instead of 500px
.content{
height: 1000px;
margin-top: 500px; <---- change to 100%
background-color: orange;
}
solution2
0 2015-01-01 02:39:02
I'm not 100% sure of what you're asking for, but if your high means height , maybe you should use contain instead of cover for the background-size .
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
solution3
0 2015-01-01 02:48:53
Well the lol-coaching page you linked is not scaling at all, also they have cropped their image to show only what they need.
They also did not attach the background to the body, it put it in a separate header div.
.wsite-background {
background-image: url('//cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') !important;
background-repeat: no-repeat !important;
background-position: 50% 0 !important;
background-size: auto !important;
background-color: transparent !important;
background: inherit;
}
EDIT:
But if you just want to have your image start higher up, take advantage of the background-position and edit the second variable. [jsFiddle] with your code.
background-position: 0 50% !important;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.