-2
Я пытаюсь сделать свое фоновое изображение #home отзывчивым, поэтому, когда я изменяю размер моего браузера или просматриваю его через свой мобильный телефон, он должен быть отзывчивым, пожалуйста, скажите мне, как мне это сделать? как вы можете видеть при изменении размера моего браузера, фоновое изображение не распространяется на полный браузер. , а на правой стороне есть пробел, что означает, что фоновое изображение не растягивается, чтобы покрыть всю секцию. Надеюсь, вы понимаете.background image отзыв
вот мой код
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/jumbotron.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="/">Home</a></li>
<li><a href="#about-me">About Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#kudos">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper -->
<!-- Home -->
<section id="home">
<div class="col-sm-7 hero-text">
<h1>I'm <span>Ali</span></h1>
<p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>
<ul id="social-icons">
<li><a href="/"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href=""><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href=""><i class="fa fa-google-plus fa-2x"></i></a></li>
</ul>
</div>
</section>
<footer>
<p>© Muhammad Ali</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11.3/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
и CSS
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/*Header*/
body {
margin-top: 50px;
font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
font-size: 16px;
background: url('../img/tile.jpg') top left repeat;
}
#home {
background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') 50% 0 repeat fixed;
min-height: 500px;
padding: 40px 0;
}
.hero-text {
text-transform: uppercase;
}
.hero-text h1{
position: relative;
top: 20px;
}
.hero-text h1 span {
color: #FBB829;
}
.subtitle {
padding: 15px 25px;
border: 2px solid black;
text-transform: uppercase;
font-size: 18px;
color: black;
font-weight: 250;
letter-spacing: 0.3em;
margin-right: 25px;
display:inline-block;
position:relative;
left:600px;
top: 20px;
transform: translateX(-50%);
}
Спасибо за помощь
Я бы сказал, удалить '50% 0 повтор fixed' – Jackson
Это не работает:/ –
@Jackson Спасибо Я Бесполезный Не обращай внимания на это. Теперь это изменилось. –