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/

Similar Messages

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/

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.

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

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/

Full Screen Background Image

How do I make an image appear full screen in the background
of my flash movie like the following site...
http://www.ktm950superenduror.com/
Please respond to [email protected]
Thanks!!

CAPITAL DIGITAL wrote:
> How do I make an image appear full screen in the
background of my flash movie
> like the following site...
>
>
http://www.ktm950superenduror.com/
>
> Please respond to [email protected]
>
> Thanks!!
the movie is set to 100% x 100% instead of fixed pixels size,
causing the
SWF to fill any available space in browser. You can see the
html source code.
Regards
Urami
Happy New Year guys - all the best there is in the 2006 :)
<urami>
http://www.Flashfugitive.com
</urami>
<web junk free>
http://www.firefox.com
</web junk free>

Compatibility issue with ie, won't load full screen background image slideshow

Hi,
The page is http://blackpaint.co.uk/new/
It cannot get past the loading gif
Here are the errors codes ie is giving me, I've tried editing the line it is talking about - but no luck.
Message: 'slides[...].url' is null or not an object
Line: 23
Char: 3
Code: 0
URI: http://blackpaint.co.uk/new/supersized3/supersized.3.0.js
Message: 'slides[...].url' is null or not an object
Line: 23
Char: 3
Code: 0
URI: http://blackpaint.co.uk/new/supersized3/supersized.3.0.js
Thanks for any help,
Luke

I've been trying to compare there demo (which works in IE) with mine and I can't get it to work. Here's theirs - http://buildinternet.com/project/supersized/3/default.html
I tried including links onto the image as suggested in another message board, but no luck.

Anchored graphic as background image?

I am working with text flowing continuously through a master text frame unto multiple pages and I am trying to anchor a full-page background image (with bleed) onto specific pages. Is this possible?
I want the background image to stay with the relevant heading on each page. However, when I use "Object/Anchored Object/Insert" to do this with "custom" as the anchor option I end up with a frame on the same layer as my text. This is okay, but when I place an image in the frame, it covers the text I have entered in the text frame. I can see the dotted line indicating the anchor connection, but not the text it is anchored to. I can't change the order of objects within the layer because the "Arrange" options are greyed out. Changing the text wrap options does not help.

Thanks Bob! Really good to know. I will stop hitting my head against a brick wall!
Adding backgrounds to master pages doesn't really cut it since I still can't have them flow dynamically with the continually evolving text in this project. (I suspect I might be able to flow backgrounds with text in Word, if it came to it, but of course I chose InDesign to give me more control, particularly over the non-text elements of the layout).

How to get background image to fill the browser and remain fixed in both IE and Firefox?

Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
First of all, I'm using IE8 and the latest version of Firefox to test this.
I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

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?

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

Fluid Layout - Background Image

Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>

You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O.

Full bleed in Folio ?

How to make every page in Folio a full bleed ? It only has two pages with full bleed.
Page Layout has only square and a vertical half page.
Thanks!

How to make every page in Folio a full bleed ? It only has two pages with full bleed.
Page Layout has only square and a vertical half page.
Liz Castro has put together a great page showing all of the layouts for all of the iPhoto '08 book themes - http://www.lizcastro.com/iphotobookthemes/pmwiki.php?n=Main.Folio
I'm not sure I get your questions - basically since full bleed bleeds on all four sides there is only one way to do it - which Folio gives you - maybe you can explain more fully or maybe Liz Castro's page will help you figure it out
There also is a full bleed background layout - the gray palm tree - which if you bring up to 100% opacity is another way to do full bleed
LN

Why States don't work on Tablet view for text frames over background image?

I have Macbook Pro with Top config on top S/W everything updated.
Using Muse.
Tablet view site.
Simple text frames buttons with states over a full width background image - DON'T WORK!
The text frame buttons are in TOP layer.
Visible but do not respond to to any touch. UNLESS I delete the background image.
Can't figure it out for days.
Please help.
Thanks
Eli @

TO MUSE STAFF!!!!
I Found a major bug that needs to be fixed:
In Tablet view:
A linked text frame or state button has to be in the top layer to respond to states.
If a composition menu is opening up and covering the button when triggered - THE BUTTON WILL NOT RESPOND EVEN IF THE COMPOSITION IS CLOSED!!!
Only if the button is ARRANGED ABOVE the composition in the layer and becomes the absolute TOP OBJECT in the layer - ONLY THEN it will respond.
PLEASE LET ME KNOW IF YOU GOT IT.
I have tested it on a few projects and the bug is consistent.
[email protected]
Thanks for fixing it in the near future
Eli

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Full bleed background images

Similar Messages

Maybe you are looking for