CODEWITHSUNDEEP
cssbackground
Alex Angas
Alex Angas

Reputation: 60058

Two images comprising the background for a div?

I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):

Image

Everything is done except the background!

The quotation is different each time, so the background needs to automatically adjust in height.

It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.

Here's my current code - now on JSFiddle:

HTML

<div id="ehs-quotecontainer">
    <div id="ehs-bgleft">
    </div>
    <div id="ehs-bgright">
    </div>
    <div class="ehs-marks" id="ehs-marktop">                    
        “
    </div>
    <span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
    <div class="ehs-marks" id="ehs-markbottom">
        ”
    </div>
</div>

CSS

#ehs-quotecontainer  {
    padding-top:8px;
    padding-bottom:8px;
    background-color:#F7F8FA;
    text-align:center;
}
#ehs-bgleft {
    background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
    background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
    height:20px;
    color:#8B8C90;
    font-size:5.0em;
}
#ehs-marktop {
    float:left;
    margin-top:-18px;
}
#ehs-markbottom {
    float:right;
    margin-top:-5px;
}
.ehs-quotetext {
    padding-left:4px;
    padding-right:4px;
    color:#000;
    font-size:1.1em;
    font-style:italic;
}

Any ideas on how to make the background work correctly?

Upvotes: 3

Views: 227

Answers (4)

reisio
reisio

Reputation: 3242

Something like this: http://www.webdevout.net/test?012&raw

<!doctype html>
<html>
    <head>
        <title></title>
        <link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
        <style>
body {
    background: url(https://i.sstatic.net/VeMeV.png) no-repeat 8px 8px;
    margin: 71px 8px 8px;
}
.quote {
    border: 1px solid #dfdfdf;
    position: relative;
    padding: 8px 35px;
}
.quote 
p {
    margin: 0;
    font: italic 12px sans-serif;
    text-align: center;
    position: relative;
    z-index: 1;
}
.quote .w, 
.quote .e {
    position: absolute;
    top: 0;
    width: 75px;
    height: 100%;
    background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
    background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote 
span {
    color: #898a8e;
    font: 70px/70px allerta, serif;
    position: absolute;
}
.quote 
.ldquo {
    left: -35px;
    top: -15px;
}
.quote 
.rdquo {
    right: -35px;
    bottom: -42px;
}
        </style>
    </head>
    <body>
        <div style="width: 209px;">
            <div class="quote">
                <p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
                <div class="w"></div>
                <div class="e"></div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

david
david

Reputation: 18288

The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.

After that what you ask is fairly easy to do:

http://jsfiddle.net/7GEah/1/

Upvotes: 1

user378704
user378704

Reputation:

i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .

so here you will :

  1. you keep the background with the quotation marks as it is

  2. Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .

Upvotes: 0

Peach
Peach

Reputation: 2787

Could you create a single image, with the gradient meeting in the middle? If so, you can use:

#ehs-quotecontainer {
    background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}

Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.

I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.

Upvotes: 0

Related Questions