Page background images

I am trying to use my own images as page backgrounds. I have resized the images in Photoshop to about 28Kb but when published to a folder iweb has converted them to a png as it does and the size is between 200 and 300Kb. Therefore the site is very slow to load. Is there a cure? Or do I abandon the idea. I am just playing around to see what is possible with iweb.

That seems to be a problem with iWeb and background images. It took a 28kb jpg image I used and converted it to a 400KB png image. I did notice one thing. If I applied the image to the browser's background and had none for the the pages background color the page would load extremely fast. It took a 44kb jpg and it converted it to a 115 png file and it loads very, very fast. But when I used the same jpg file for the page's background, full size or scaled, it become 367kb and loads more slowly. 'Tis a puzzlement.

Similar Messages

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.

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.

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/

Page background images, songs, movies, don't publish

I'm new to this. I've researched other threads here and cannot find this specifically. I was so proud. What beautiful pages I had created in iWeb and so sad to discover dot mac couldn't display them!
My tinted page background images have never published. These files published into my hard drive folder but are not on iDisk. Songs appear with a tiny Q for Quicktime and a ? - files were dragged into iWeb from audio media browser. Larger Q with the movies. I have one large Movie 18.5, one smaller - 4.5 MB. It's cool if dot mac can't handle it, but perhaps they shouldn't promote that they can! I'm a huge Mac fan, but any tips or tricks before I attempt to cancel my dot mac purchase? I went back and changed all the background image file names. No luck. I am so hoping that I'm just doing something stupid. I signed up for dot mac to share my music and movie files. Help me make it work!
G4 Mac OS X (10.4.5) http://web.mac.com/divinelyfem

Looks OK by me, Bruce

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.

Fix page background image

Is there anyway of fixing a page background image where the page content is longer than the image? I want the content to scroll until the entire bg image is revealed, and then fix the image so that the rest of the text is displayed on top of it, rather than running off the bottom of it.
Please see http://www.empathydesign.co.uk/development/lucid/travel-detail.shtml, user name shannon, pw: ilkley57!
Thanks

Hi Shannon(?),
let us take a step back and reflect a little bit about your wish, because I'm not sure that it is a good solution on this page to accommodate as much text that the visitor has to scroll in this great measure.
And so MY recommendation is (please do not be angry, I want you to understand this as constructive criticism) that you limit the text onto the essentials and you better start a new additional page, where you can insert all the rest.
Hans-G.

Page background image can't be seen by certain users

hi! i'm using portal v3.0.9.8.3 and oracle db v8.1.7.0
i've created a page style with background image. I applied the page style to a page i created and assign some users to this default page.
problem is only some users can see the page with background image. they are have the same security settings and rights. but if i change the color of the tab, all users can see this change.
any suggestions?
thx.

You may already know, browsers always cache css/images/js files. So if you would like to force browser to download new version of the files, you need to updated reference of the files using some kind of query string "http://server/test.css?version=XXX",
where on every updated you update the version 'XXX' to some new value. Usually we do this using some kind of programmatic approach - for example in my project I update the css/images/js links using the dll/assemlby modified date. So that every time I deploy
a new sharepoint solution, the files urls get changed.
Thanks,
Sohel Rana
http://ranaictiu-technicalblog.blogspot.com

Export to web page, background image option gone?

Apologies if this has been addressed (couldn't get the right boolean search terms to work properly) as it is a simple question.
Upgraded to iphoto '08 and now one of my favorite features in the 'export a web page' area doesn't appear to exist anymore - the option to use a background image instead of a color.
Has this 'feature' been removed? It's easy to stick the line into the html code, but what I value is the fact that it (used to) modify each photo's html page, sticking that line in, which wouldn't be feasible for me to do manually.
Thanks,

Many thanks for pointing that out. In Composer I have been able to remove the path to my hard drive stored image. What shows now on page source is: <body style="background-image: url(cloudback800x600.jpg);"> but the image
is still not visible. Your further advice will be appreciated.

Can I control the position of the page background image?

Hi All!
My simple question: Can I control the position of the background image for example in a user-made style? I mean can I make the position of the image to center rather then tile? If it possible without editing the html code...

To create a background image for a region create a table nested within that region using the following definition <TABLE WIDTH="100%" HEIGHT="100%" CELLPADDING="0" CELLSPACING="0" MARGIN="0" BORDER="0"> and create an image call integrated into the <TD> tag within said table.

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.

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.

Centering Background Image

After countless hours of using the forums I finally am
posting my first question.
Is there a way to center the background image that is set
through page properties? I have a centered table and it would be
nice to have a continuous background.
Any help would be appreciated.

Or you could do what Murray just said :-) But through
standard html, no.
Lawrence Cramer
*Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
email: lawrence at cartweaver dot com
Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
www.cartweaver.com
news://support.cartweaver.com
=====================================================
"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:emuj2u$636$[email protected]..
> Nope, you can't center a page background image. You have
to work from the
> top left hand corner.
>
> Now you could create a fixed width, floating, centered
"master container"
> div and have a background image for this div. Then place
all your
> content in this container. This would give you the
illusion of a centered
> page background.
>
> Hope this helps.
> --
> Lawrence Cramer
> *Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
> email: lawrence at cartweaver dot com
>
> Cartweaver CF, ASP & PHP Shopping Cart for
Dreamweaver
> www.cartweaver.com
> news://support.cartweaver.com
> =====================================================
>
>
> "cheesewagon" <[email protected]> wrote
in message
> news:emuhmn$4hv$[email protected]..
>> After countless hours of using the forums I finally
am posting my first
>> question.
>>
>> Is there a way to center the background image that
is set through page
>> properties? I have a centered table and it would be
nice to have a
>> continuous
>> background.
>>
>> Any help would be appreciated.
>>
>>
>
>

Page background images

Similar Messages

Maybe you are looking for