Copy link to clipboard
Copied
I'm creating a website for my portfolio, and one of the things I wanted to have is a full page background image that the div tags are in. I know there is a way to put it in via page properties, but that doesn't allow you to add CSS styles and I want the image to re-size with window changes. This requires putting the image in a div tag, but then it pushes the other div tags (such as my header section and navigation) so that they aren't over the image like I want. Is there a way to push the image div tag to the back so that the other div tags go over it.
I'm using HTML5, and it will also be a responsive design, but the fluid background is only for desktops.
I don't go on the adobe website often, so if you have an answer to this, or need more information to figure it out please email me at tacosrules@yahoo.com and you'll get a faster reply than on this forum.
Thank you everyone for your help.
Copy link to clipboard
Copied
You can do it without using a <div> if you use...
background-image:url(yourimage.jpg);
background-repeat:no-repeat;
background-size:cover;
In your css. The only problem with that is only CSS3 compliant browsers will see it as a full window image (oddly enough, IE 9 does see it).
For one with more backwards compatibility, you'll need to use a javascript similar to the one available here...
Copy link to clipboard
Copied
You should set this forum to email you on a reply.
I don't have a link in your question to determine how you are trying to do this, but here's a technique I have used:
Take a look at this website and see if it doesn't have what you are trying to do. You'll see the flag in the background and I have used opacity in the layers on top of it to keep the flag somewhat visible.
Now, what the flag does not do is re-size itself with the viewport (the browser window). But the flag is in a div that sits on top of the body. My code is accessible, but you're looking for the flag div and it's defined in CSS thusly:
#flag {
width: 100%;
background-image: url("../images/polish-flag.png");
background-repeat: no-repeat;
min-height: 900px;
}
Now, CSS3 adds a new attribute you can apply to the background image thusly:
background-size: 100% 100%;
That would make your background fill the viewport.
I chose to not do that, because I was worried about versions of Internet Exploder before 10.
Copy link to clipboard
Copied
OPTION #1 Use a small seamless image tile for your body CSS and repeat it to fill the viewport window. This works in all browsers.
http://alt-web.com/Backgrounds.shtml
OPTION #2 Use CSS gradients (no images required). This works in all browsers.
http://www.colorzilla.com/gradient-editor/
OPTION #3 Use multiple background-images or colors & apply them to different divisions. This works in all browsers.
http://alt-web.com/TEST/LHS-test.html
OPTION #4 Use a big background-image with CSS background-size:cover. This won't work in pre-IE9 browsers.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.