CODEWITHSUNDEEP
htmlcss
Deepak Ingole
Deepak Ingole

Reputation: 15742

add css background to div

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

Upvotes: 0

Views: 95

Answers (5)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

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

}

Upvotes: 0

Anon
Anon

Reputation: 2874

Add to parent div haslayout:

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

Upvotes: 1

MAQU
MAQU

Reputation: 562

<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.

Upvotes: 3

geevee
geevee

Reputation: 5451

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

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

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?.

Upvotes: 3

Related Questions