CODEWITHSUNDEEP
cssbackground-image
Philip7899
Philip7899

Reputation: 4677

How do I get the background image to not repeat and take up the entire section?

My site is up at avidest.com/test. I am trying to make the background image go from the top of the page down to the "our online services" section. For some reason, it is ending early and there is a stretch of page where the black body background is visible. I don't want this black section to show. here is the css:

.header {
 /*background: #f0f7f7 url(images/header_bg.gif) top repeat-x;*/
    background: transparent;
    padding: 0;
    margin: 0 auto;
    height: 70px;
}

.block_header {
    margin: 0 auto;
    width: 980px;
    padding: 0;
    border: none;
}

.logo {
    float: left;
    padding: 0;
    margin: 0;
    width: 242px;
}

.uppercontain {
    background: url(images/slider_bg.gif) no-repeat;
    background-size: 100%;
    min-width: 1050px;
    min-height: 700px;
}

.slider {
/* background:url(images/slider_bg.gif) no-repeat; background-size: 100%; min-width: 1050px; */
    background: transparent;
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.slider .gallery {
    margin: 0 auto;
    width: 1050px;
    height: 383px;
    padding: 0;
} /*width was 880px*/
.slider .formbox {
    float: right;
}

and here is how it appears on the page:

<body bgcolor="#000000">
    <div class="main">
         <div class="uppercontain">
            <div class="header">
                 <div class="block_header">
                      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="242" height="94" border="0" alt="logo" /></a></div>
                 </div>
            </div>
            <div class="slider">
                 <div class="gallery">
                     <div class="form box"> Form is here </div>
                 </div>
            </div>
         </div>
    Rest of content
    </div>

Upvotes: 0

Views: 10608

Answers (3)

faulkmore
faulkmore

Reputation: 61

Include fallback then css3 to be backwards compatible with browsers that don't support css3 background-size syntax.

background: url('image_Url_here') no-repeat scroll center center transparent;
background: url('image_Url_here') no-repeat scroll center top/cover transparent;

Tested on

firefox v12.0 (stuck on this version cuz mozilla dropped support for WinXP SP1)
Chrome v25.0(.1364 Ubuntu 12.04)

Upvotes: 0

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

simple. That fixes all your needs. Although I'm not sure if that works fine in IE but it definitely does in Firefox, Chrome and Safari

background: url('image_Url_here') no-repeat scroll center top/cover transparent;

Upvotes: 0

basarat
basarat

Reputation: 275937

CSS3 adds the background-size property : http://www.w3schools.com/cssref/css3_pr_background-size.asp which you can use with IE9 and above http://caniuse.com/#feat=background-img-opts

Otherwise your options are to use a bigger background image OR use a div with image behind your content

Upvotes: 2

Related Questions