CODEWITHSUNDEEP
jqueryhtmlcss
ariel
ariel

Reputation: 3072

How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

I am new to development and have been tasked with a task that seems a bit challenging.

I have to create a one page website where in the navigation I have about us and contact us link. When the user clicks on about us the user's screen should scroll to that section on the page and same thing for contact us. I was able to accomplish this.

What do I need help with?

I am using a background image that I want to cover the user's screen width and height that way the 2nd section isn't shown if a user has a larger screen.

This is how I have stuff stacked: 

<div class="header">
<img class="logo" src="/logo.jpg">
<a href="#about" class="link">
<a href="#contact" class="link">
</div>
<div class="part1">
some content
</div>
<div class="part2" aboutus" id="about">
About us
</div>
<div class="part3 contactus" id="contact>
Contact us
</div>

So Part 1 is the first thing the user sees along with the header.

Question:

How do I display a background image that only appears in part1 and covers the entire width and height of the user's screen regarldess of how small or big it is. I am sure I need JQuery or some CSS structuring but not sure where to start.

What can I do to accomplish this?

Upvotes: 3

Views: 486

Answers (3)

Vahid Hallaji
Vahid Hallaji

Reputation: 7447

CSS:

.part1 {
    background: url(bkgd.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

JS: using jquery

$(window).resize(function () {
    $(".part1").css("min-height", $(window).height());    
}); 
$(document).ready(function () {
    $(".part1").css("min-height", $(window).height());
});

See demo updated

Upadted: Adjust .part background size using background-size set to the cover keyword and center the background view. Also using jquery to set the minimum height of .part equal to window height to fit the view port dynamically.

Upvotes: 1

Milan and Friends
Milan and Friends

Reputation: 5610

HTML 

<div id="wrapper">

  <div class="header">
    <div class="header-wrapper">
      <img src="logo.jpg" class="logo"/> 

      <a href="#" onClick="scrollContent('about')" class="about">About</a>
      <a href="#" onClick="scrollContent('contact')" class="contact">Contact</a>
    </div>
  </div>

  <div class="part1">
    <div class="part1-wrapper">
        <!-- some content -->
    </div>
  </div>

  <div class="part2 about" id="about">
    <div class="part2-wrapper">
      <!-- About us -->
    </div>
  </div>

  <div class="part3 contactus" id="contact">
    <div class="part3-wrapper">
       <!-- Contact us -->
    </div>
  </div>

</div>

CSS

#wrapper {
  padding-top: 35px;
}
.header {
  background: #666;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  z-index: 9999;
}
.header a {
  float: left;
  margin: 8px 18px 0 0;
  font-family: Verdana;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 1px;
  color: #fff;

  transition: color 0.2s ease-in;
}
.header a:hover {
  color: #ddd;
}
.logo {
  float: left;
  margin-right: 30px;
}
.part1,
.part2,
.part3 {
  position: relative;
  width: 100%;
 }
.part1 {
  background: #aaa;
}
.part2 {
  background: #ccc;
}
.part3 {
  background: #eee;
}
.part1-wrapper,
.part2-wrapper,
.part3-wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 10px;
}

jQuery

function scrollContent(id) {
  $( 'html, body' ).stop().animate({ scrollTop: $( '#' + id ).offset().top }, 1200 );
}

$(function () {

  var parts = $('.part1, .part2, .part3');

  parts
    .css({
      height: $(window).innerHeight(),
      width: $(window).innerWidth() 
    });

});

jsFiddle - http://jsfiddle.net/mdesdev/VJxeH/

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

 .part1{
    background: url(http://someurl.com/someimg.png);
    background-size: 100% 100%;
    width:100%;
    height:100%;
 }

Set the background size and set the div to have full height and width

Upvotes: 2

Related Questions