Good Afternoon Stack! I need some CSS help.
I have a background image that I want centered with the body of the website. I want it to look nice and not too blown up, or too small. Here's what I've tried so far.
body{
background-color: #1e1e1e;
padding: 20px 0 20px 0;
}
#container{
max-width: 780px;
background: url('/img/background2.png') #1e1e1e no-repeat 0px 12px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #d1d1d1;
}
It almost works. When the browser window is full screen, the background image seems to pull to the left. When the browser window is smaller it fits perfect. And on a mobile phone like my MotoX using chorme it's blown up really huge instead of looking reasonably scaled.
background-size: contain; is even farther from my desired result.
Here's the HTML for ref. I've also thrown it up on my server http://jasontolhurst.com
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jason Tolhurst</title>
</head>
<body>
<div id="container" class="container-fluid">
<header class="header clearfix">
<div class="container-fluid">
<ul class="list-inline pull-right">
<li>
<a target="_blank" href="http://stackoverflow.com/users/4490365/squeegy"><img style="max-width:23px" src="/img/stackoverflow.png" /></a>
</li>
<li>
<a target="_blank" href="https://github.com/squeegy06"><img style="max-width:23px" src="/img/github.png" /></a>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/pub/jason-tolhurst/91/9b/775"><img style="max-width:23px" src="/img/linkedin.png" /></a>
</li>
</ul>
</div>
</header>
<div class="container-fluid">
<div class="jumbotron">
<div class="container-fluid">
<h1>Jason Tolhurst</h1>
<p class="lead">Professional PHP developer and programming enthusiast</p>
</div>
</div>
</div>
<div id="content" class="container-fluid">
<div id="about-me" class="col-md-12">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="projects" class="col-md-12">
<h2>Projects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="contact" class="col-md-12">
<h2>Contact Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<footer>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/screen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</footer>
</div>
</body>
</html>
Thanks!
Use background-position to tell the background-image where to sit as a background. In your case, if you would like the background image directly in the center of the element it's applied to, you want 50% 50%. Where, 0% 0% will be position the image relative to the top left hand corner of it's element and 100% 100% will position the image in the bottom right hand corner of it's element.
So background-position: 50% 50%;
It's important to note that using a media-query will allow you to apply different CSS display properties/values at different browser sizes. This will allow you to fine-tune a certain CSS property/value to a certain display size.
Read more:
background-position
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
and
media-query
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다