seo Question posted in
Some basic information to get you started with this can be found here.

background image responsive – SEO

I am trying to make my #home background image to be responsive so when I resize my browser or see it through my mobile it should be responsive please tell me how do I do this? as you can see when I resize my browser the background image does not cover the complete browser.
and on the right side there is white space which means the background image does not stretch to cover the whole section
I hope you understand.

here is my code

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>&copy; 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>

and 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%);

  }

Thanks for the help

Tags:

2

Answers


  1. 0

    You can use the background-size: cover css attribute. So it would go on your #home selector like this.

    #home {


    background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 500px;
    padding: 40px 0;


}

    See this for reference https://css-tricks.com/perfect-full-page-background-image/

    Login or Signup to reply.
  2. 0

    Try this:

    #home {
    min-height: 500px;
    padding: 40px 0;
    background-image: url("http://cookusart.com/images/2/images-background/images-background-02.jpg");
    background-repeat: no-repeat;
    background-position: center center;      /* center the image */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search