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

Question

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>

score 2 · Answer 1 · answered Jun 13 '14 at 06:37

2

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;
}

answered Jun 13 '14 at 06:37

Sid

801
8
19

[Read more here](http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) about the problems with star selector :) – misterManSam Jun 13 '14 at 06:50
@Jklyn If Its works for you then please atleast watt up so that other will consider as use full answer and If you use * then it will cause problem for you in future – Sid Jun 13 '14 at 07:06

score 1 · Answer 2 · answered Jun 13 '14 at 06:38

1

Remove the default margin from the body tag.

body {
  margin:0;
}

answered Jun 13 '14 at 06:38

Michaël Hompus

3,349
24
35

score 1 · Answer 3 · answered Jun 13 '14 at 06:44

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;
}

score 0 · Answer 4 · answered Jun 13 '14 at 06:41

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.

score 0 · Answer 5 · edited May 23 '17 at 10:28

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:

Performance Impact of CSS Selectors

Simplifying CSS Selectors

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;
}

[Read more here](http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) about the problems with star selector :) — misterManSam, Jun 13 '14 at 06:49
Well, probably... but if the performance is impacted, that means you have way too much markup on the page. otherwise, the change(if any) should be negligible. Cheers! — Fr0zenFyr, Jun 13 '14 at 06:55
Of course one definite benefit of your approach is that you can have the properties applied on selective elements only(as opposed to `*` which does it for any and every element on page). — Fr0zenFyr, Jun 13 '14 at 06:58
To an extent it's nitpicking. However, dropping in a CSS reset stylesheet that provides a clean CSS foundation is easy to do and, yes, you can tweak it to your preference. It's nice to have a (relatively) consistent behaviour across browsers! — misterManSam, Jun 13 '14 at 07:00

score -2 · Accepted Answer · answered Jun 13 '14 at 06:37

-2

Add this to your css

* {
margin: 0;
padding: 0;

}

answered Jun 13 '14 at 06:37

aashi

492
3
11

[Read more here](http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) about the problems with star selector :) – misterManSam Jun 13 '14 at 06:49
I am using that in all of my projects n i dont see any performance issues – aashi Jun 13 '14 at 06:59
the change is negligible for pages of normal sizes(in markup). a bigger issue is that it removes default margin and padding from all the elements on a page. To fix this, one has to add margins and padding manually for each element in CSS(this will also increase the size of your CSS file). – Fr0zenFyr Jun 13 '14 at 07:02
Agreed, I tend not to use it for that very reason. Plus there are better ways to solve the problem. Down-vote from me. – Ruddy Jun 13 '14 at 07:02
I prefer to write my own margins n paddings n not use default as it looks ugly with default margins and paddings..so for me it is a good thing – aashi Jun 13 '14 at 07:08
Also if this was in a fiddle I would look at it and give you the solution I think is best. And @aashi I would recommend using a CSS reset sheet. – Ruddy Jun 13 '14 at 07:08

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

6 Answers6