CODEWITHSUNDEEP
cssbackground-color
renathy
renathy

Reputation: 5355

background color from position

I have to start background-color from certain position and not to apply for whole element.

html

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here  text heretext here text here</p>

css

p.tax-free-keksis {
background-image: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);
background-position: left center;
background-repeat: no-repeat;
background-color: #c2e8fb;
padding-top: 15px;
padding-left: 50px;
padding-right: 10px;
text-align: left;
}

link to jsfiddle: http://jsfiddle.net/MVST6/

I need background-color: #c2e8fb to start about 50px from left (so that checkmark image backround is white and not blue).

I think that I cannot position background-color in some "normal" way. Here I need some fix I am not aware of, as I am not CSS developer and I am new to designing webpage.

Upvotes: 0

Views: 180

Answers (4)

ralph.m
ralph.m

Reputation: 14365

Here's another option:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

p.tax-free-keksis {
    position: relative;
    background-color: #c2e8fb;
    padding-top: 15px;
    margin-left: 50px;
    padding-right: 10px;
    text-align: left;
}

.tax-free-keksis:before {
    content: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);
    position: absolute;
    left: -50px;
    top: 0;
}

</style>
</head>
<body>

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here text heretext here text here
    </p>

</body>
</html>

Upvotes: 1

Pavlo
Pavlo

Reputation: 44947

It's not possible with a background color, but possible with a gradient background image:

background-image:
    linear-gradient(to right, transparent 50px, #c2e8fb 50px),
    url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);

And if you need to support oldie browsers, you have two use two elements: one with a background color and other one with a background image.

Upvotes: 1

tcgumus
tcgumus

Reputation: 328

You can use this code:

position: fixed; 
top: 0; 
left: -120px; 
width: 50%; 
height: 100%; 
border-right:1px solid #d0d0d0; 
background-color: red; (if you want you can put image here)
z-index: -10;

this code is for image. Then, You should give a style to text and give padding to it.

Upvotes: 0

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13065

You can't do it this way. Maybe try something like this:

HTML

<p class="tax-free-keksis">
    <img src="http://tax.allfaces.lv/templates/tax/images/poga_keksis.png">
        text here text here text here text here text here text here text here text here text here text here text here text heretext here text hered
    </p>

CSS

p.tax-free-keksis {
    background-repeat: no-repeat;
    background-color: #c2e8fb;
    padding-top: 15px;
    margin-left: 50px;
    padding-right: 10px;
    text-align: left;
}
p.tax-free-keksis img {
    position: relative;
    float: left;
    left: -50px;
    top: -25px;
}

Upvotes: 0

Related Questions