CODEWITHSUNDEEP
htmlcss
selva
selva

Reputation: 41

background color and background image is not working in css

Here is my code,

.main
{
    width:63%;
    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;
    background-position:top-right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

update:

.main
 { 
width:63%; background:#eee; 
background:#eee url("../slice/gray-bg.jpg") repeat top right; 
float: left; 
margin-left: 0px; 
padding-left: 3px; 
}

html:

<div class="main">
<div class="section1">
<p id="author1"> Hotel Garden Elysee
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Paris, France</span></p>
<p style="display: inline; font-weight: bold;">January 20 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_1.jpg" alt="" />
    <p>non tincidunt augue placerat non.</p>
<p><a href="">More...</a></p>
</div>
<div class="section2">
<p id="author2"> S.Francesco al Monte Hotel 
<span style="text-align:right;font-size:18px;font-weight: initial;"> - Naples, Italy</span></p>

<p style="display: inline; font-weight: bold;">January 29 2011 by David LaHuta in <a href="">A Closer Look</a> <p style="margin-left:202px; display:inline"><a href="">(1) Comments<img src="slice/comment-icon.jpg" alt="" /></a></p></p>
<hr style="color: rgb(255, 255, 255); height: 1px;" />
    <img style="width: 100%;" src="slice/image_2-11.jpg" alt="" />
    <p>non tincidunt augue placerat non</p>
<p><a href="">More...</a></p>
</div>
</div>

But i'm not able to see shadow in left side like following image

http://postimg.org/image/wxf6ve2f3/

In the above link main content have shadow on that left side right.

But for me, it didn't display, when i check in inspector element,

it showed that image,

Please help me to fix this?

Upvotes: 1

Views: 405

Answers (4)

Sprazer
Sprazer

Reputation: 520

You can write all styles on the same line like this:

backgroud: #333 url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat right top;

but it might be easier to understand if you separate them all

    background-color:#eee;
    background-image:url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: right top;

Upvotes: 1

Kapil
Kapil

Reputation: 1141

Please replace your .main class in css 

.main{
    width:63%;
    background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat top right;
    float: left;
    margin-left: 0px;  
    padding-left: 3px;  
}

OR 

 .main{
     width:63%;
     background:#eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") repeat top right;
     float: left;
     margin-left: 0px;  
     padding-left: 3px;  
 }

Upvotes: 1

David Wilkinson
David Wilkinson

Reputation: 5118

You can't set multiple properties like repeat on background-image.

Should be the background shorthand, which does allow you to set multiple properties:

background: #eee url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg") no-repeat;

Alternatively, you can set it out individually:

.main {
    background-color: #eee;
    background-image: url("http://s27.postimg.org/jqpqvv6pr/gray_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

Upvotes: 2

PrivateOmega
PrivateOmega

Reputation: 2900

As ur css contains both background-image and background attributes,there would be a conflict i think. Hope it helps Cheers :)

Upvotes: 1

Related Questions