html - CSS background elements on both sides of the screen -


i want achieve this: 2 decoration elements (sort of waves) on both sides of screen. here's i've got far. if more elegant solution possible (like styling css body element), please advise. below solution fine, if both < img > elements not visible. can check in action.

here's working fiddle.

can help?

<!doctype html> <html class=""> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link type="text/css" rel="stylesheet" href="styles/style.css" >     <style type="text/css">         .background_left {             background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");             background-repeat:repeat-y;             background-position:left;             position:absolute;             left:0;         }          .background_right {             background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");             background-repeat:repeat-y;             background-position:right;             position:absolute;             right:0;         }         .background_left, .background_right {             height:100%;         }      </style>  </head>  <body>     <div class="background_left">         <img src="http://www.destadesign.com/destacms/images/background_border_left.png">      </div>      <div class="background_right">         <img src="http://www.destadesign.com/destacms/images/background_border_right.png">     </div>       <div class="content" style="height:500px;"> <!-- content -->     </div> </body> </html>

just this:

    body {      	background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;  }

css adds 2 background images body, positions them right or left respectively, , sets repeat-y, doesn't fill screen.

jsfiddle demo


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more