The idea is to use SVG instead of a background-image for flexibility and mostly to reduce size and to save on having to load an image.
I have managed to get the SVG working using a z-index: -1; and a block of blurb using z-image: 1; . It works quite well.
The responsive problem has a mind of its own and does not center both vertically and horizontally. Maybe there is a conflict somewhere, a browser problem or it is just impossible because I have spent quite some time searching without success.
I would really like t get this to work mostly because of mobile performance and being able to play with different SVG techniques.
[Tools Pingdom
Online demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Just Playing around"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> John_Betong's SVG Background </title>
<link href='/favicon.ico' type='image/x-icon' rel='shortcut icon'/>
<style type="text/css"> body {
margin:0; padding:0;
font-size:100%;
background-color:#f0f0f0; color:#000;
}
.bd1 {border:solid 1px red;}
.bgs {background-color: snow;}
.clb {clear:both;}
.fll {float:left;} .flr {float: right;}
.fw7 {font-weight: 700;}
.mg4 {margin:4.2em auto 0;}
.ooo {margin: 0; padding: 0;}
.p42 {padding:0.42em;}
.tac {text-align:center;}
.w88 {width:88%;}
#parent {
position: relative;
display: inline-block;
width: 88%; max-height:500px;
text-align: center;
line-height: 500px;
}
#child {
text-align:left;
display:inline-block;
background-color: aqua;
padding: 0.88em;
line-height: 1.42em;
}
#bg-svg {
position: absolute;
left: 0; top:0;
margin: 0 auto;
z-index: -1;
}
#foot {
position: fixed;
bottom:0; left:0;
width: 100%;
background-color: #ccc;
}
</style>
</head>
<body>
<h5 class="ooo flr"> <a href="#"> Forum </a> </h5>
<h1> John_Betong's SVG Background </h1>
<h5 class="ooo flr"> <a href="index-source.php">Source</a> </h5>
<hr class="clb">
<div id="parent" class="w88 mg4">
<div id="child">
<dl>
<dt> This DIV has z-index:1 </dt>
<dd> I am trying to get it to center vertically and horizontally</dd>
<dd> </dd>
<dd> I have tried umpteen options all without success :( </dd>
<dd> </dd>
<dd> Is it possible center a child <b>div</b> with a <b>SVG</b> background? </dd>
</dl>
</div>
<div id="bg-svg">
<svg viewBox="0 0 1000 500" style="background-color:#ffffcc;" >
<text x="8" y="20">svg-005.svg (background:#ffd; z-index: -1) </text>
<line x1="0" y1="90%" x2="90%" y2="000" stroke="red" stroke-width="0.51" stroke-linecap="butt"/>
<line x1="0" y1="100%" x2="100%" y2="0%" stroke="green" stroke-width="1.3" fill="#eeeeff" stroke-linecap="square"/>
<line x1="10%" y1="99%" x2="100%" y2="10%" stroke="blue" stroke-width="0.51" stroke-linecap="round"/>
</svg>
</div>
</div>
<div id="foot" class='tac mg4 p42 fw7'>
<a href='https://tools.pingdom.com'> Tools.PingDom </a>
</div>
</body>
</html>
Hi there John,
bearing in mind that I, personally, would not use ansvg element for this project, here is my attempt at
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#wrapper {
position: relative;
min-height: 100%;
padding-bottom: 3em;
box-sizing: border-box;
background-color: #ffc;
}
#header {
padding-top: 0.062em;
border-bottom: 0.062em solid #000;
background-color: #f0f0f0;
}
h1 {
font-size: 1.5em;
text-align: center;
}
#container {
position: relative;
}
svg {
position: absolute;
z-index: 0;
top: 0;
left: 0;
overflow: hidden; /* IE11 required this attribute, reason unknown */
}
#content {
position: relative;
z-index: 2;
display: table;
}
#inner {
display: table-cell;
height: 50vw;
vertical-align: middle;
}
#inner div {
width: 50%;
padding: 1em;
margin: 0.5em auto;
border: 0.062em solid #000;
background-color: rgba( 255, 255, 255, 0.75 );
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 0.5em 0;
border-top: 0.062em solid #000;
background-color: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> John_Betong's SVG Background </h1>
<!-- #header --></div>
<div id="container">
<svg viewbox="0 0 1000 500" >
<line x1="0" y1="90%" x2="90%" y2="000" stroke="red" stroke-width="0.51" stroke-linecap="butt"/>
<line x1="0" y1="100%" x2="100%" y2="0%" stroke="green" stroke-width="1.3" fill="#eeeeff" stroke-linecap="square"/>
<line x1="10%" y1="99%" x2="100%" y2="10%" stroke="blue" stroke-width="0.51" stroke-linecap="round"/>
</svg>
<div id="content">
<div id="inner">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh.
</p>
</div>
<!-- #inner --></div>
<!-- #content--></div>
<!-- #container --></div>
<div id="footer">
<a href='https://tools.pingdom.com'>Tools.PingDom</a>
<!-- #footer --></div>
<!-- #wrapper--></div>
</body>
</html>coothead
Hi there John,
here is an alternative to the svg element example…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#wrapper {
position: relative;
min-height: 100%;
box-sizing: border-box;
background-color: #ffc;
z-index:-2;
}
#header {
padding-top: 0.062em;
border-bottom: 0.062em solid #000;
background-color: #f0f0f0;
}
h1 {
font-size: 1.5em;
text-align: center;
}
#container {
position: relative;
overflow:hidden;
}
#container::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
transform: rotate( -26.0deg );
background-image: linear-gradient(to bottom,
transparent 0, transparent 45%,
#f00 45%, #f00 45.1%,
transparent 45.1%, transparent 49.9%,
#008000 49.9%, #008000 50%,
transparent 50%, transparent 54.9%,
#00f 54.9%, #00f 55%,
transparent 55%, transparent 100%);
}
#content {
position: relative;
display: table;
width: 100vw;
height: 50vw;
}
#inner {
display: table-cell;
vertical-align: middle;
}
#inner div {
width: 50%;
padding: 1em;
margin: 0.5em auto 3em;
border: 0.062em solid #000;
background-color: rgba( 255, 255, 255, 0.75 );
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 0.5em 0;
border-top: 0.062em solid #000;
background-color: #ccc;
text-align: center;
}
#footer a {
color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> John Betong's CSS Background </h1>
<!-- #header --></div>
<div id="container">
<div id="content">
<div id="inner">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh.
</p>
</div>
<!-- #inner --></div>
<!-- #content--></div>
<!-- #container --></div>
<div id="footer">
<a href="https://tools.pingdom.com">Tools.PingDom</a>
<!-- #footer --></div>
<!-- #wrapper--></div>
</body>
</html>coothead
What have you got against Svg elements?
The simple Svg example was just to demonstrate how Php can file_get_contents() any Svg file and not use an unnecessary Http request to render the web-page.
Many thanks for the two solutions. I look forward to trying both of them.
Nothing in particular, but I am always happier
coothead
1 Like
Hi there John,
I’ve had a little time to simplify and improve the CSS code in my second example…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}
#wrapper {
position: relative;
min-height: 100%;
padding-bottom: 3em;
box-sizing: border-box;
background-color: #ffc;
}
#header {
padding-top: 0.062em;
border-bottom: 0.062em solid #000;
background-color: #f0f0f0;
}
h1 {
font-size: 1.5em;
text-align: center;
}
#container {
background-image: linear-gradient( -26.4deg,
transparent 0, transparent 45%,
#f00 45%, #f00 45.1%,
transparent 45.1%, transparent 49.9%,
#008000 49.9%, #008000 50%,
transparent 50%, transparent 54.9%,
#00f 54.9%, #00f 55%,
transparent 55%, transparent 100% );
overflow: hidden;
}
#content {
display: table;
width: 100vw;
height: 50vw;
padding: 0.4em 0;
box-sizing: border-box;
}
#inner {
display: table-cell;
vertical-align: middle;
}
#inner div {
width: 50%;
padding: 1em;
margin: 0.5em auto;
border: 0.062em solid #000;
background-color: rgba( 255, 255, 255, 0.75 );
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
line-height: 3em;
border-top: 0.062em solid #000;
background-color: #ccc;
text-align: center;
}
#footer a {
color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> John Betong's CSS Background </h1>
<!-- #header --></div>
<div id="container">
<div id="content">
<div id="inner">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh.
</p>
</div>
<!-- #inner --></div>
<!-- #content--></div>
<!-- #container --></div>
<div id="footer">
<a href="https://tools.pingdom.com">Tools.PingDom</a>
<!-- #footer --></div>
<!-- #wrapper--></div>
</body>
</html>coothead
2 Likes
Many thanks again for the refinements.
I have uploaded your three solutions and also made some quick modifications to your second solution by adding seven SVG backgrounds which can be selected from the top menu. The SVG background positioning requires sorting but a least the basic idea is sound where it is easy to change the backgrounds with PHP
file_get_contents(‘svg-file.svg’); .
Every page is fast at rendering and using PingDom’s San Jose, California, USA Server the downloads are all less than 100ms
2 Likes
system
October 26, 2017, 3:18pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
