CODEWITHSUNDEEP
css
Jklyn
Jklyn

Reputation: 352

How to make full width background in the website not a full screen?

I've been trying to make a full width background image in the site defining its height but the image is has 5px blank in the left and right side of the screen. When defined the CSS for the background in the body section it is perfect but while defining in the div part, 5px blank in the left and right side of the screen that is not intended.

CSS:

body {
    background: url(images/bg.jpg) #FFFFFF repeat-x;
    font: normal 12px verdana;
    color: #9C9C9C;
    line-height: 125%;
}
#top_banner {
    width: 1000px;
    margin: auto;
    height: 120px;
}
#menu_bg {
    width: 1000px;
    margin: auto;
    background: url(images/menu_bg.jpg) no-repeat;
    height: 86px;
    margin-top: 7px;
}
#menu {
    width: 805px;
    float: right;
    margin-top: 40px;
}
#slider_bg {
    background: #CCCCCC;
    height: 362px;
    width: 100%;
}
#slider {
    background: grey;
    height: 362px;
    width: 1000px;
    margin: auto;
}
#bigmenu_bg {
    background: #333745;
    height: 427px;
    margin-top: 4px;
}

HTML:

<body>
    <div id="top_banner"></div>
    <div id="menu_bg">
        <div id="menu"></div>
    </div>
    <div id="slider_bg">
        <div id="slider"></div>
    </div>
    <div id="bigmenu_bg"></div>
</body>

Upvotes: 4

Views: 1308

Answers (6)

misterManSam
misterManSam

Reputation: 24712

A CSS reset is a good answer. More information: What is a CSS Reset?

The following works, but is not recommended for performance reasons as well as it giving unexpected results:

* { margin: 0; padding: 0: }

Read more here about the problems with the star selector :)

From that answer:

When it comes to performance, Steve Souders is the man:

Shameless quote from one of the reports:

The key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector (coincidence?). Here’s a much more expensive selector: A.class0007 * {}. Although this selector might look simpler, it’s more expensive for the browser to match. Because the browser moves right to left, it starts by checking all the elements that match the key selector, “*“. This means the browser must try to match this selector against all elements in the page.

[bold emphasis mine]

The following snippet is a good start for your example. It removes all browser defaults so you can build consistent CSS on top. It looks ridiculous, and you can remove elements that you will not be using, but it will give a consistent behaviour and faster performance.

Have a fiddle!

CSS 

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}

Upvotes: 0

Fr0zenFyr
Fr0zenFyr

Reputation: 1939

Add margin:0; to body tag(to remove it's default) and increase top margin on #menu_bg to 15px; (to correct the position of menu)

body {
    background: url("images/bg.jpg") repeat-x scroll 0 0 #FFFFFF;
    color: #9C9C9C;
    font: 12px/125% verdana;
    margin: 0;
}

#menu_bg {
    background: url("images/menu_bg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 86px;
    margin: 15px auto auto;
    width: 1000px;
}

Upvotes: 1

Kinnectus
Kinnectus

Reputation: 899

What's happening is that the different browsers are applying their own "default" styling which may include different values of padding and margin - hence the small amount of left margin or padding you're experiencing.

This is why many sites use CSS resets or normalize.css to give a level playing field and force browsers to apply base styles that your custom CSS can then build upon.

Upvotes: 0

Micha&#235;l Hompus
Micha&#235;l Hompus

Reputation: 3489

Remove the default margin from the body tag.

body {
  margin:0;
}

Upvotes: 1

Sid
Sid

Reputation: 801

Use Body like This

body {
background: url(images/bg.jpg) #FFFFFF cover;
font: normal 12px verdana;
color: #9C9C9C;
line-height: 125%;
margin: 0;
background-size: cover;
}

Upvotes: 2

aashi
aashi

Reputation: 492

Add this to your css

* {
margin: 0;
padding: 0;

}

Upvotes: -2

Related Questions