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

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 [email protected] and you'll get a faster reply than on this forum.
Thank you everyone for your help.

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.

Similar Messages

How to create a scaled page background image?

Hi - does anyone know of a way of creating a page background image which will scale to fit any screen width? I've tried googling it, but get back so many complicated explanations that I don't know which to believe. Up until now I've resorted to creating a large image, usually around 1700 x 1400px, which just about works, but obviously smaller screens lose a lot of it. I'd really like to understand how to do this properly,
Thanks
SW

How far back in browser version history do you want to support?
IE9+ and any modern browser (like Firefox, Safari, Chrome and Opera) will work with the background-size:cover attribute:value in CSS3: http://www.w3schools.com/cssref/css3_pr_background-size.asp
For older browsers, you'll need a bit more complicated solution using javascript like this page: http://louisremi.github.io/jquery.backgroundSize.js/demo/

How to create a full-page collage?

Am trying to find an easy way to create a full-page collage of pictures (to then save as a single photo, JPEG or PDF). Is there an easy way to do this within iPhoto '08 or a standard Mac application? (In the Cards/Calendars/Prints option of even ordering from Apple, there's no option or setting listed that I can see to create one. Are there other templates to download somewhere that I could use within iLife, or some standard application?)

rekkus:
Welcome to the Apple Discussions. OmniGraffle is a great application for creating collages. This one was 98 photos. You can use it in it's demo mode which allows 10 or less images or objects per file or project. I think if you group objects they will count as 1. Then export as a jpg or other file format.
Do you Twango?
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 08 libraries and Leopard. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.

Full page background

hi i want to create a full page background on my website, i want it to scroll aswelll as ive tried a method before but it didnt seem to work as everything else scrolled up expect the background so it didnt look right
here are some examples of what i want :
http://www.roundhouse.org.uk/
http://www.fabriclondon.com/
cheers in advance

What have you tried? Can you give us a link to a live page somewhere?
If you are using HTML5 and CSS3 to generate a graduated background, you may set up a non-scrolling one thusly:
body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 100%;
          color: #000000;
          background-color: #fff;
          margin: 0;
          padding: 0;
          background-repeat: no-repeat;
          background: #402a67; /* Old browsers */
          background: -moz-linear-gradient(top, #402a67 0%, #ffffff 70%) fixed no-repeat; /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#402a67), color-stop(70%,#ffffff)) fixed; /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Opera11.10+ */
          background: -ms-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* IE10+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#402a67', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
          background: linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* W3C */
I should mention that this does scroll on iOS mobile devices I have used. I'm thinking it's a limitation of either Mobile Safari or iOS.
If you look at the background setup there, you'll see the call "fixed." Take that out, and you get a scrolling background. Here is an aside in the same website:
aside {
     width: 250px; float: right; margin-left: 8px;
     margin-right: 5px;
     background: #f6d78d; /* old browsers */
     color: 000000;
     background: -moz-linear-gradient(top, #f6d78d 0%, #fbf6f6 100%) no-repeat; /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, from(#f6d78d), to(#fbf6f6)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, #f6d78d 0%,#fbf6f6 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #f6d78d 0%,#fbf6f6 100%); /* Opera11.10+ */
     background: -ms-linear-gradient(top, #f6d78d 0%,#fbf6f6 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6d78d', endColorstr='#fbf6f6',GradientType=0 ); /* IE6-9 */
     background: linear-gradient(top, #f6d78d 0%,#fbf6f6 100%); /* W3C */
     border-color:#000;
     border-style:double;
     border-width:thick;
     border-radius:15px;
      box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
When I first created the Aside, I was copying the gradient call from the body element and, since it was set to fixed, it changed as you scrolled. Took me a bit of time to understand that one could take that out and get the effect one wanted.
With respect to image files, they're simpler, as one does not have to create a CSS3 call for each browser.
Simply call your background image. For the fabriclondon.com one, they may have a simple call to a color for three divs. Or, they may have a two or four-pixel GIF file that mades the top and bottom black and the middle white, with a "repeat-x" statement:
background-repeat: repeat-x;
That will cause the browser to load a very skinny image and then "tile" it left and right. Please remember that, by default, all background images are repeated both X and Y.
One may also make an image like in the roundhouse.org be a background for a div or a background image for the whole page (in the body statement). Roundhouse put theirs in the body:
body{
     font:62.5%/1 Arial,Verdana,Helvetica,sans-serif;
     margin:0;padding:0;
     background:#FFF url(/sites/all/themes/roundhouse/css/images/body-bg.jpg) top center no-repeat;
     color:#333;
     text-align:center;
Make sense?

Full Page Background in Internet Explorer 8 and Below

I am currently trying to achieve a full page background image using the method found here: http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html
Everything works fine in FF, Chrome, and Safari, but when I preview the page in IE 8, the image shows up as being centered in the page and does not stretch to fill the whole browser.
You can see this here: www.virtualeconomyonline.com
Here is the CSS:
html {
     background: #F4EEFE url(../images/grass.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     overflow: auto;
body {
     -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grass.jpg', sizingMethod='scale')";
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/grass.jpg', sizingMethod='scale');
Does anyone have any ideas why it might not be filling the whole browser in IE 8 and under?

Hi
As the tutorial says, don't apply this to the html tag, (there is no reason to apply anything to the html tag any more).
Move all the css that you have to the body tag css.
PZ

Page background images show in preview but not after uploading

Hi -
I've built a page with a flash animation, and some other
minimal information below the movie. I have a page background image
that should be repeating horizontally behind everything. When I
preview it, all looks great! After I upload it to the actual site
the background images disappear. The code is all within the page.
Any ideas?

never mind... problem resolved.
my error in not checking my files over. oops.

How to setup jpeg file as background image for all site pages and resolution stay same?

I have uploaded my new site to http://wwwtjhtestdec2012.businesscatalyst.com
I have background image set the same on all site pages but image is incorrectly zoomed way in on some pages (like Home page for example).
The Donate Page shows the correct resolution which I want displayed on all site pages.
How do I set all other site pages to match background image resolution of the Donate Page?
I am not sure what I am doing wrong that is changing this, or if it's possibly a bug?
I want the background image to be full screen on all site pages please advise how to resolve.
I would appreciate the assistance!
Thank you kindly!
Tammy

I have re-uploaded my site to http://wwwtjhtestdec2012.businesscatalyst.com.
If I set the Master page to Tile vertically that is only way I can get full screen background image of vegetables (without distortion).
Then however another issue occurs....
On Home Page of site I set same property to Tile and the background is better (no visible line where tiles meet---above the navigation tool bar--that is what I want for all pages associated to Master.
So logically, I tried setting a 2nd associated site page to same master, to Tile but on Statement of Faith Page, notice the horizontal line where tiles meet, above my navigation bar on that site page?
Why does Muse not handle both site pages associated to the same master identically?
Any of the other options besides Tile or Tile vertically cause the background to not fill entire screen.
Ideas?

How can I create a full page on Adobe Muse (without side space)?

How can I create a full page with Adobe Muse (without side space)?

Muse uses Fixed width Layouts so that is not 100% possible. You can extend images and box elements to full width but not actual content.

How to build proportionally scaled, full bleed background images correctly

How do I build full bleed proportionally scaled background images that proportionally scale to different sizes of browser windows and without leaving any blank spaces at the right or bottom? How do I make sure that the text also scales proportionally?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

Responsive Full Screen Background image - How?

Hi,
I would be very grateful for any guidance on the CSS/HTML code that I need to use for inserting a static, 'responsive', full screen, background image on a website.
Best wishes
Simon

Depending on what kind of browser support you want to include, this can be a single line of css code...
background-size:cover;
...which takes care of all modern browsers back to IE9. Or, if you want to support older browsers (IE8 and lower), a more involved javascript would be required...
http://papermashup.com/jquery-scalable-fullscreen-background-image/

How do I keep the body background-image centered?

I have a body background-image that does not fill up the
entire window on the tops and bottoms of most monitors (it
strectches to the left and right just fine) and so I would like to
have it centered vertically with equal amounts of the
background-color #ECE5C8.
I assumed using background-position: 50% 50% would do the
trick and it does until switching to full screen mode and all the
content jumps upwards and messes up the whole site layout (IE
only-in friefox, the background-image still doesn't center) so
instead I have the background-position set to: 50% 0%.
Thanks a million to anyone who can help me get it centered, I
know there has to be an easy fix but I sure can't figure it out!
The site can be found here:
http://www.lightspacewebdesign.com/sacredsolas

There would be only two ways to make this layout 'work'.
1. Just make everything on that page a graphic. Then there is
no
possibility that resizing the text in the browser will blow
the layout.
This is a very bad idea for obvious reasons.
2. Have the text containing 'graphical box' built in pieces
so that as the
text expands, it can cause the box to expand as well. The
easiest way to do
this is with a top a middle and a bottom image of the box,
using each as the
background image of three stacked containers. Place the text
in the middle
container and as it expands, it will tile the middle
background image
vertically to give the impression of the box expanding. This
approach
doesn't lend itself to your background image, since there is
no way to tile
the background image to fill the newly created space.
Beyond that, I think you are a dead duck. The problem is not
that this is
what you were given to work with - it's that you didn't
understand how
unusable the design was when you accepted it. I think your
best option now
is to go back to the designer and explain to them how this
lovely layout
only works well in print, and not on the web. Show them how
it fails.
Solicit suggestions from them for how to make it work in a
medium where
there is no way to control the size of the text.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"afriendofcheese" <[email protected]> wrote
in message
news:[email protected]...
> By "a rigid layout scheme that cannot allow flexibility"
I assume you mean
> that
> everything shouldn't be bound inside the position of the
background-image,
> but
> this is what the designer and client gave me to work
with.and so I have to
> make
> due.
>
> With that in mind, I hope someone out there can help me
out with this!
>

Website with Full Screen Background Images

I'm trying to create a website with full screen background images (or possibly, a video) that will crop to the browser window. It's also important that the image be center-justified. The Die Antwoord site does pretty much what I'm trying to accomplish. I'd also like to know how they can use such high resolution images. If I try to use a high res image, the file size is enormous. Another site that uses similar technology only with a video is the TV on the Radio site.
I am fairly new to Flash so please forgive me if this is a rudimentary question. Any help will be greatly appreciated.

Hi Bob,
Thanks for your reply.
What I'm concerned about is the crispness of my full-page images. Am I right in assuming with a PDF folio, static images won't be as crisp? Is there a way to maintain its sharpness?
M

How to create a full height rectangle without add-ons like "MuseThemes 100% height"

On my site www.rostany.com I'm trying to create the background black metal grid going from top to bottom. I've managed to do this by putting it down as a page background image tiled vertically. However, now I need to add image slideshow as a background and want to place the above mentioned grid over it (the way it used to be) to constitute the "page" where text and graphic information is laid out.
This is what I want this grid to look like (spanning from top to bottom)
This is how it looks with the ugly gap appearing at the top when the content is filled in.

I believe you have already figured out the solution as I can verify with your live site.
Thanks,
Sanjit

Keynote 6.0 isnt loading master page background image

I made a kaynote in Keynote 5.3 and my coworker opened it in keynote 6.0 but the master pages background image fill was not loading and came up blank. On several other laptops with keynote 5.3, the background images loaded properly.
why and how do i fix this?

One of the most common causes of Mavericks problems appears to be If the hard drive was not wiped clean before installing Mavericks as remnants of incompatible software remain.
I would back up then clean install the OS.

Full bleed background images

I have full bleed background images. They load correctly (proportionally) and quickly in firefox. In internet explorer, they take a long time to load and they are scaled disproportionally. Once I change the size of the browser window, they adjust to the correct scale. Once a page has gone through this motion, it stays correct when revisiting the page. On another computer, also in IE , they load incorrectly at first and after a few seconds, adjust to the correct scale. What can I do make sure the images load correctly in all internet browsers?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

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

Similar Messages

Maybe you are looking for