• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to create a full page background image that is fluid?

New Here ,
Apr 25, 2013 Apr 25, 2013

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.

Views

28.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 25, 2013 Apr 25, 2013

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...

http://louisremi.github.io/jquery.backgroundSize.js/demo/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Apr 25, 2013 Apr 25, 2013

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 25, 2013 Apr 25, 2013

Copy link to clipboard

Copied

LATEST

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines