Menu icon Foundation
How to make a CSS Background Image

Hey everyboby! Matt emailed us about making a background image with an SVG logo on top. Let's help him out!

--

I’m completely stuck trying to figure this out. I want to have two background images aligned to the top of my page and have tried every tutorial possible to get it it to work. Nothing renders on the page at all.

Attached is the background image which I want to stack with the logo centered on top of the lumber. Can you provide me with valid Foundation code as I simply can’t figure it out.

logo is triangle.svg

Thanks

Lumber

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="255.78px" height="147.467px" viewBox="0 0 255.78 147.467" enable-background="new 0 0 255.78 147.467"
	 xml:space="preserve">
<polygon fill="#79A9B0" points="0,0 128.022,147.467 255.78,0 "/>
<g>
	<path fill="#FFFFFF" d="M118.393,81.883c2.865,3.75,5.715,7.707,8.134,11.498v0.025c0.004-0.004,0.008-0.008,0.009-0.01
		c0.003,0.002,0.006,0.006,0.011,0.01v-0.025c2.42-3.791,5.271-7.748,8.133-11.498H118.393z"/>
	<path fill="#FFFFFF" d="M138.762,61.129c-1.021,0.662-3.205,2.414-6.198,2.414c-2.918,0-5.503-1.621-6.496-2.316
		c-1.024,0.664-3.466,2.316-6.462,2.316c-3.798,0-5.673-1.367-6.385-2.072c-0.622,0.572-2.643,2.072-6.654,2.072
		c-0.901,0-1.69-0.078-2.386-0.205c3.219,3.713,8.21,9.629,13.189,16.133l18.278,0.076c5.111-6.682,10.238-12.744,13.461-16.455
		c-0.943,0.268-2.103,0.451-3.513,0.451C140.991,63.543,139.069,61.534,138.762,61.129"/>
	<path fill="#FFFFFF" d="M145.05,39.508c-3.475,0-5.836,2.334-5.836,6.695h1.554v13.127c0,0,1.152,0.838,4.829,0.838
		s5.105-0.838,5.105-0.838l0.005-0.66V44.975C150.707,41.536,148.715,39.508,145.05,39.508"/>
	<path fill="#FFFFFF" d="M140.768,34.84c0,0,9.627-0.062,9.627-5.469v-10.26c0,0-4.783,0-10.62,0c0,0-11.431,0-12.894,0
		c-2.419,0-14.277,0-14.277,0c-6.642,0-10.865,0.001-10.865,0.001v40.218c0,0,1.149,0.836,4.827,0.836
		c3.677,0,5.107-0.836,5.107-0.836V24.15c1.302,0,3.104,0.367,3.104,2.15v30.334v2.695c0,0,1.152,0.836,4.829,0.836
		c3.678,0,5.105-0.836,5.105-0.836v-2.695V24.15c1.167,0,2.722,0.298,3.043,1.627c-0.014,0.134-0.025,0.263-0.025,0.398v33.155
		v-0.66c0,0,1.153,1.496,4.835,1.496c3.673,0,5.101-0.836,5.101-0.836l0.083-0.66V26.176c0-0.153-0.007-0.303-0.016-0.452
		c0.329-1.331,1.826-1.573,3.036-1.573V34.84z"/>
</g>
</svg>
            

         

backgroundimagelogo

Hey everyboby! Matt emailed us about making a background image with an SVG logo on top. Let's help him out!

--

I’m completely stuck trying to figure this out. I want to have two background images aligned to the top of my page and have tried every tutorial possible to get it it to work. Nothing renders on the page at all.

Attached is the background image which I want to stack with the logo centered on top of the lumber. Can you provide me with valid Foundation code as I simply can’t figure it out.

logo is triangle.svg

Thanks

Lumber

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="255.78px" height="147.467px" viewBox="0 0 255.78 147.467" enable-background="new 0 0 255.78 147.467"
	 xml:space="preserve">
<polygon fill="#79A9B0" points="0,0 128.022,147.467 255.78,0 "/>
<g>
	<path fill="#FFFFFF" d="M118.393,81.883c2.865,3.75,5.715,7.707,8.134,11.498v0.025c0.004-0.004,0.008-0.008,0.009-0.01
		c0.003,0.002,0.006,0.006,0.011,0.01v-0.025c2.42-3.791,5.271-7.748,8.133-11.498H118.393z"/>
	<path fill="#FFFFFF" d="M138.762,61.129c-1.021,0.662-3.205,2.414-6.198,2.414c-2.918,0-5.503-1.621-6.496-2.316
		c-1.024,0.664-3.466,2.316-6.462,2.316c-3.798,0-5.673-1.367-6.385-2.072c-0.622,0.572-2.643,2.072-6.654,2.072
		c-0.901,0-1.69-0.078-2.386-0.205c3.219,3.713,8.21,9.629,13.189,16.133l18.278,0.076c5.111-6.682,10.238-12.744,13.461-16.455
		c-0.943,0.268-2.103,0.451-3.513,0.451C140.991,63.543,139.069,61.534,138.762,61.129"/>
	<path fill="#FFFFFF" d="M145.05,39.508c-3.475,0-5.836,2.334-5.836,6.695h1.554v13.127c0,0,1.152,0.838,4.829,0.838
		s5.105-0.838,5.105-0.838l0.005-0.66V44.975C150.707,41.536,148.715,39.508,145.05,39.508"/>
	<path fill="#FFFFFF" d="M140.768,34.84c0,0,9.627-0.062,9.627-5.469v-10.26c0,0-4.783,0-10.62,0c0,0-11.431,0-12.894,0
		c-2.419,0-14.277,0-14.277,0c-6.642,0-10.865,0.001-10.865,0.001v40.218c0,0,1.149,0.836,4.827,0.836
		c3.677,0,5.107-0.836,5.107-0.836V24.15c1.302,0,3.104,0.367,3.104,2.15v30.334v2.695c0,0,1.152,0.836,4.829,0.836
		c3.678,0,5.105-0.836,5.105-0.836v-2.695V24.15c1.167,0,2.722,0.298,3.043,1.627c-0.014,0.134-0.025,0.263-0.025,0.398v33.155
		v-0.66c0,0,1.153,1.496,4.835,1.496c3.673,0,5.101-0.836,5.101-0.836l0.083-0.66V26.176c0-0.153-0.007-0.303-0.016-0.452
		c0.329-1.331,1.826-1.573,3.036-1.573V34.84z"/>
</g>
</svg>
            

         
Rafi Benkual over 5 years ago

Hi Matt! while this has little to do with Foundation, it was a fun challenge! Here is the solution:

http://cdpn.io/GJcAF

Click edit pen in lower left to see code.

leveena over 5 years ago

css Image

http://www.corelangs.com/css/text/image.html

CSS Background Image