add css background to div

Question

I have following document structure ,

<div style="background:#000000;">
    <input type="button" style="float:right" value="click here"/>
    <input type="button" style="float:right" value="click here"/>
</div>

but dont give me result I want.I want the background to be repeated over div body like in shown in image

enter image description here

Any help would be highly appreciated

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

Firstly, you're missing a 0. #00000 isn't a valid hex colour code. Hex colour codes must either contain 3 or 6 hexadecimal digits. To resolve this, simply add a 0 (or remove two of the 0s):

<div style="background:#000000;">
    ...
</div>

From the CSS Color Module specification:

The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

Secondly, when floating elements you need to clear them afterwards, as floating takes them out of the page's context. For this we can refer to What methods of ‘clearfix’ can I use?.

edited May 23 '17 at 12:07

Community

1
1

answered Oct 07 '13 at 09:18

James Donnelly

126,410
34
208
218

@captain I've edited my answer with a further fix and a link to http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best. :-) – James Donnelly Oct 07 '13 at 09:22
I dont think `clearfix` was issue here.Can you elaborate a little?.The issue was div gets rendered with height zero when it contains floating elements. – Deepak Ingole Oct 07 '13 at 15:37
1

@captain it has zero height *because* of the floated elements. The "clearfix" fixes this by stretching the containing element to the full height. – James Donnelly Oct 07 '13 at 16:00
yes that I understood.But why `clearfix` here I dont think this will make any change to `div` with floated content.It will affect only to element appearing next to `div` with floated element. – Deepak Ingole Oct 07 '13 at 16:02
Your `div` has 0 height, therefore it's not visible. This is the reason your background isn't showing up. In fixing the `clear` property, your `div` will have its height restored. http://jsfiddle.net/hzjv3/ – James Donnelly Oct 07 '13 at 16:03
Can you take a little effort of explaning me with a fiddle.I will be very thankful for your kindness – Deepak Ingole Oct 07 '13 at 16:05
@captain I'd edited my previous comment to add a JSFiddle link. :) – James Donnelly Oct 07 '13 at 16:07
Great.Thanks a ton for making me aware of `overflow v/s clearfix` – Deepak Ingole Oct 07 '13 at 16:11

score 3 · Answer 2 · answered Oct 07 '13 at 09:19

<div style="background:#000; overflow: hidden">
    <input type="button" style="float:right" value="click here"/>
    <input type="button" style="float:right" value="click here"/>
</div>

Try this. Your Container includes floated divs so its rendered with 0 height.

score 1 · Answer 3 · edited Oct 07 '13 at 09:33

1

Add to parent div haslayout:

overflow:hidden
div:after{content:''; display:block; clear:both;}

edited Oct 07 '13 at 09:33

Deepak Ingole

14,912
10
47
79

answered Oct 07 '13 at 09:18

Anon

2,854
14
18

score 0 · Answer 4 · answered Oct 07 '13 at 09:19

0

<div style="width:100%;padding:3px;background:#000;text-align:right;">
    <input type="button" value="Click" />
    <input type="button" value="Cancel" />
</div>

answered Oct 07 '13 at 09:19

geevee

5,411
5
30
48

score 0 · Answer 5 · answered Oct 07 '13 at 09:37

0

Like this

demo

css

.divbg{
background-color:black;
    height:22px;
    padding:5px;
}
.divbg input{
    float:right;

}

answered Oct 07 '13 at 09:37

Falguni Panchal

8,873
3
27
33

add css background to div

5 Answers5