All geek questions in one place

How to make a full-width background on a website incomplete?

I'm trying to make a background image of full width on a site that determines its height, but the image is 5pxblank on the left and right of the screen. When defining CSSfor the background in the body section, it is ideal, but when defining in part, it is div 5pxempty on the left and right side of the screen, which 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>
+4
source share
6 answers

Add this to your css

* {
margin: 0;
padding: 0;

}

-2
source

Use a 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;
}
+2
source

body.

body {
  margin:0;
}
+1

margin:0; body ( ) #menu_bg 15px; ( )

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

, , " ", - , .

CSS normalize.css, , CSS.

0

A CSS reset - . : CSS Reset?

, , :

* { margin: 0; padding: 0: }

:)

:

, - :

:

CSS , (?). Heres : A.class0007 * {}. , . , , , "*". , .

[ ]

The following snippet is a good start for your example. It removes all the default values ​​in the browser, so you can create consistent CSS from above. It looks ridiculous, and you can remove items that you will not use, but it will give consistent behavior and better performance.

There is a violin!

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

Source: https://habr.com/ru/post/1544427/

More articles:


All Articles