Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <pre><code>#wrapper { background-color: Wheat; width: 1280px; /* doing that because jsfiddle viewport is not the entire page width.*/ /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */ } header { width: 100%; height: 180px; background-color: White; margin:0 auto; } header #background-image { background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg"); text-align: center; display: table; height: 100%; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.3; } #house-logo { display: table; float: left; height: 160px; padding-left: 10em; } #line1 { display: table; text-align: center; padding: 0; margin: 0; font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif; font-size: 7em; color: FireBrick; } #line2 { margin: 0; padding-right: 6em; font-family:"Trebuchet", sans-serif; font-size: 4em; } </code></pre> <p>AND</p> <pre><code>&lt;div id="wrapper"&gt; &lt;header&gt; &lt;div id="background-image"&gt; &lt;img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " /&gt; &lt;h1 id="line1"&gt;check it out!&lt;/h1&gt; &lt;h1 id="line2"&gt;Home Inspection&lt;/h1&gt; &lt;/div&gt; &lt;/header&gt; &lt;/div&gt; </code></pre> <p>/////////////////// EDIT GEARED TOWARDS COMMENT //////////////////</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;header&gt; &lt;div id="background-image"&gt;&lt;/div&gt; &lt;div id="header-group" &gt; &lt;img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " /&gt; &lt;h1 id="line1"&gt;check it out!&lt;/h1&gt; &lt;h1 id="line2"&gt;Home Inspection&lt;/h1&gt; &lt;/div&gt; &lt;/header&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>AND .......</p> <pre><code>#wrapper { background-color: Wheat; width: 1280px; } header { width: 100%; height: 215px; background-color: White; } header #background-image { background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg"); height: 215px; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.3; position: absolute; } #header-group { margin: 0 auto; } #house-logo { float: left; height: 160px; padding-left: 30%; } #line1 { padding: 0; margin: 0; font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif; font-size: 7em; color: FireBrick; } #line2 { display:inline; font-family:"Trebuchet", sans-serif; font-size: 3.7em; } </code></pre> <p>NOTE: that it isn't perfectly fitted to the code you provided. I had to extend the height of the header to 215px to fit the "line2" you can try and fiddle with line 2 css if you need to have a smaller height size.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload