Photoshop Question posted in
The official user guide can be found here.

html page as a background – Photoshop

In html + css, I want to add html page as a page background. i created it as a slices from Photoshop then saved it as html/image.

I used to use image as a background like:

body  
{
background-image:url('../../resources/bacground.png');
background-size: 100% 100%;
background-repeat: no-repeat;  
}

But now i don’t know how to place html as a background.

Tags:

4

Answers


  1. 0

    Background Image

    One way to do the background is to use background-size: cover as per this post:

    html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
    Login or Signup to reply.
  2. 0

    There is no simple answer here, what you’re probably going to want to do is make the “html background” in a absolutely positioned container, then put a transparent div over the top, then you should be able to place your real html content on top and the background shouldn’t be interactive

    Login or Signup to reply.
  3. 0

    You can’t do that now.
    However you can save your html as svg and then use

    html {
  background-image: url(svg-css-background.svg);
}

    In the future you will have the possibility to import html directly with a link
    Perhaps you can also wrap your background html into a div , and make it unresponsive and absolute. And drop the real html on top of it.
    I’m not sure if that is what you really want but if you want to use links in an image you can use map + area or this (svg)

    <map name="map1">
<area
   href="contacts.html" alt="contacts" title="contacts"
   shape=rect coords="6,116,97,184">
<area
   href="new.html" alt="new!" title="new!"
   shape=poly coords="150,217, 190,257, 150,297,110,257">
</map>

<img src="a.jpg"
   alt="image" border=0 width=300 height=300
   usemap="#map1">
    Login or Signup to reply.
  4. 0 
    #bgimage
{
background-image:url(..../../image.jpg);
backgroud-repeat:no-repeat;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search