All geek questions in one place

Two images containing background for div?

I need to create CSS in CSS and work on IE7 + (and, if possible, Firefox):

Image

Everything is done, except for the background!

The quote is different every time, so the background should automatically adjust in height.

It should also automatically adjust the width of the container in which it is placed. By this I mean that the gradient cannot be stretched. The background should be the left gradient of gradual change, then the background color, then the right gradient of gradual decrease.

Here my current code is now in 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 wallpaper look correct?

+3
source share
4 answers

- position:relative, .

, , :

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

+1

- : 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(http://i.stack.imgur.com/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>
+1

? , :

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

(, , ), .

, , , , , .

0

I hate talking about it, but since you will use a very small image, you would rather use a background and not insert your text with your background.

so here you are:

  • you keep the background with quotes as it

  • Paste the text in the "a" field that you have. And finally, you can just give the text some padding. and you are ready to go.

0
source

Source: https://habr.com/ru/post/1787074/

More articles:


All Articles