Mawg
Mawg

Reputation: 40167

How do I give the same background color to all elements in a container?

Thanks for the very quick replies to my previous question.

"The first thing on the page, right after , I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page."

I forgot to mention that I would like the entire "banner" to have the same background colo(u)r. The text, the image and everything in between.

Upvotes: 0

Views: 711

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272236

Something like this?

HTML

<div class="divwrap">
    <div class="div1">text</div>
    <div class="div2"><img src="http://farm4.static.flickr.com/3170/2724062433_68f2af7af7_m.jpg"></div>
    <div class="divclear"></div>
</div>

CSS

.divwrap
{
    background-color: #CCC;
}
.div1
{
    float: left;
}
.div2
{
    float: right;
}
.div2 img
{
    display: block;
}
.divclear
{
    clear: both;
}

Upvotes: 1

Hueiss Leigh L.
Hueiss Leigh L.

Reputation: 31

.banner{ color:blue;
         background-color:blue;
         background:url(yourimage.png);
         background-position:right;
         width:100%
       }

in addition, you can have create a new class so that the div for for banner can inherit the properties, this way you can seperate the div for the image and text

Upvotes: 2

danyolgiax
danyolgiax

Reputation: 13096

Something like this:

  <div style="height:100px;width:100%;background:url(yourimage.png);background-position:right;">Yourtext</div>

Upvotes: 2

Related Questions