Fixed Background Image

How can I get a fixed background image in my iWeb? The kind where it stays put and the text scrolls.

Can anyone help with this please?

Similar Messages

New bug in IE11 -- scrolling position:fixed + background-image elements jitters badly.

visit the following page in IE10 and IE11, and use your mouse wheel to scroll the page:
http://www.oussamaharb.com/
In IE <= 10, Safari, Chrome, and FireFox, the header section of that page stays put when scrolling. However, only in IE11, when you scroll the page the the header jumps around and jitters. Essentially IE11 will do this on any div with a fixed
background image.
Note the jitter does not happen if you grab the scrollbar with the cursor and move it up and down (which people rarely do). Some sort of bug when using mouse wheel has been introduced in IE11.

You are too late to see. He removed
background-attachment:fixed with IE11. His link originally showed the stuttering. It looked too unsatisfactory.
You can still see his handsome design with FireFox where it continues to work well. (And also good with Chrome, Opera, Safari too). See how the picture on top stays fixed when you scroll the page? Not with IE anymore. With IE
that great effect is removed, sacrificed to cure the ugly wart. The picture now just scrolls upward with the page to avoid the IE11 bug. Too bad.
Since your first reply here 7 months ago. Have you any special MVP insider-info yet how to make this great CSS3 port-hole feature scroll smoothly with IE11? Or possibly, you have encouraging news that it will become corrected in IE12? Your
name is IECustomizer MVP. It sounds like you will know.
Here are more stutter examples for you to examine. You may click the background to toggle several different ways to see the affliction during scroll. Please post back and tell your observation that you can see this stutter.
https://googledrive.com/host/0B8BLd2qPPV7XOGl1Sjk3c29uVlU
Possibly somebody still hasn't yet noticed in bryanangler's example ("OP"), IE11 needs to be maximized (or large) to observe the problem. At least,
somebody has not acknowledged. Bryanangler's page is Responsive Web Design (RWD). The menu on top is present when space permits. That's when the
background-attachment:fixed applies and makes the horrid stutter.

Fix background image within div

Hello
I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.
I'm trying to make the background image within a div to be fixed when i scroll vertically.
Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)
Here's my code
CSS
body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 214px;
width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
And here is my HTML

<div id="rightDiv" style="background-image: url(Images/informacao.png)">
</div>

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).
I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.
I've been trying to fix this for days.. Help would be much appreciated.
Funny thing is that this only happens in IE9.. Chrome works perfectly.

DevilUrd wrote:
Didn't work. sorry, but i don't think i understood ur reply quite well..
Here's what i used:

<div id="rightDiv" background: url('Images/informacao.png') no repeat fixed;>
<tr>
<td>textextextextextextextextext</td>
</tr>

Could u pls be a little more detailed?
sorry, but i'm still very unexperienced at this..
That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...
<div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">
But it would be better to place it in your css instead...
#rightDiv {
clear: none;
background:url(Images/informacao.png") no-repeat fixed top left;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;

How to make a fixed background image in Dreamweaver CC

I'm trying to make my background image fixed so when I scroll down in Dreamweaver CC it stays completely still, could someone please tell me how to do that?

You've got a lot of code that you don't need. And I'm very dubious about the file:/// path to your image. Are you working in a Defined Local Site Folder? The image path should be pointing to your site, not files:/// on your local hard drive.
body {
background:#000 url(concept_watch_dogs___wallpaper_1366x768_by_mackintosh141-d6led76.jpg) no-repeat center center fixed;
Nancy O.

Fixed background image not wanted

Hi all,
I am having a problem that has me stumped. I have a background image applied to a div and even though I haven't specified anywhere in the css for this image to be fixed position, it will not scroll with the rest of the text. I have tried to apply background-attachment css of scroll etc, but nothing is changing.
Here is the page in question - http://www.sheffieldstudent.co.uk/test/studentstrology_may2011.html
CSS is here: http://www.sheffieldstudent.co.uk/test/_css/student.css
Any ideas? Thanks.
PS: Sorry for the slow DL speed but I haven't compressed the images yet.

As for the text resize layout problem, I see what you mean. I don't know any other ways of accomplishing the same design without using background images for the navigation. Would there be a better way?
Sure - each text block would need to be in its own container, each with its own background image. That way, when the block expands vertically, the text doesn't overlap other background images. Your background images would have to be designed to allow this vertical expansion, however, which could be tricky or impossible depending on the complexity of the image.

Using a fixed background image

I am just getting started with Muse, and am trying to duplicate a site that I'm building in Dreamweaver. My site has a stationary background that stays fixed as I scroll the page down or up. Is there a way to do this with Muse?*

Hi Jerry,
Welcome to the world of Muse! I am very much an amateur, still learning Muse and never used another program, so I hope this is what you are actually looking for...
It depends... if you use the image as a browser fill, make sure that you uncheck the scroll box at the bottom of the fill options. If you are placing the image directly onto the page, then just pin it - select the image, go to the pin option to the left of the x-y-w-h- coordinate settings on the control panel, and click on one of the dots.
Hope this helps....
Kate

Can I, as a webmaster use the bgproperties="fixed" html to show a non scrolling, fixed background?

Here is my body tag...
<body onLoad="scrollit(100);" BGPROPERTIES="fixed" background="images/highway-bg.jpg">
I want my background to be fixed. Will this work in the Firefox browser? Is there another way?

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

Is there a way to control how a background images appear on all browsers?

I have created a site that includes a fixed background image so that the only thing that scrolls is the main container that holds all the content. But I don't want it tiled. I want this one image to fill the entire screen behind the container. Is this possible to control from my end (by settings or by sizing the image in a certain way) or is this something that I can't control at all?

This http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/ may help

Background image in td

I have a background image in a td tag that worked fine, until
several months ago. The image shows up in Firefox, but does not
show in IE. Any suggestions. the code is
<th width="96" height="274" align="left" valign="top"
background="images/btn_UPCOME.jpg" bgcolor="#898AC0"
scope="row"no-repeat="no-repeat" fixed="fixed">

Your code is horked....
<th width="96" height="274" align="left" valign="top"
background="images/btn_UPCOME.jpg" bgcolor="#898AC0"
scope="row"no-repeat="no-repeat" fixed="fixed">
First, you should be using CSS to specify the background
image. Next, you
are missing a space between '"row"' and 'no-repeat'. Then,
there is no such
attribute as either 'no-repeat' or 'fixed'. Try this -
<th width="96" height="274" align="left" valign="top"
style="background-image:url(images/btn_UPCOME.jpg);
background-color:#898AC0;repeat:no-repeat;background-attachment:fixed;">
But - be aware, IE doesn't play well with fixed background
images on
anything but a body tag. The good news is that it doesn't
make good sense
to have a fixed background image in this table cell.
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
==================
"shirley11" <[email protected]> wrote in
message
news:ge5lv1$68n$[email protected]..
>I have a background image in a td tag that worked fine,
until several
>months
> ago. The image shows up in Firefox, but does not show in
IE. Any
> suggestions.
> the code is
>
> <th width="96" height="274" align="left" valign="top"
> background="images/btn_UPCOME.jpg" bgcolor="#898AC0"
> scope="row"no-repeat="no-repeat" fixed="fixed">
>

CSS Background Image - where is it?

Hello, Have placed a fixed background image within my
CSS...it looks fine when I look at it in Dreamweaver. The problem
is when I upload to my webspace the image isn't there. Any ideas?
These are the attributes:
background-attachment: fixed;
background-image: url(images/home.gif);
background-repeat: no-repeat;
background-position: 1px;

dulcettones" <[email protected]> wrote in
message
news:f3m22g$kpu$[email protected]..> Sorry...the
URL is:
> www.notjustthenews.co.uk
> The image in question goes in the top left corner and
changes depending on
> the section you're viewing.
Remove: background-attachment: fixed; and you'll see the
image shows up on
the index page. You need to remove that on each of the rules
you have set
for the #top divs... some of them are missing the white
background color
also.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

Fixed Background/Scrolling text table

I have a fixed background image (no repeat) I have a table
inserted (760px) that contains my text. My pages are different
lengths. How do I get the table to scroll over the background
image? (www.soulseekers.org.uk) Thanks for your help....

Just be aware that background-attachment:fixed doesn't work
in IE6 and
earlier on anything other than the body tag....
I'm not sure about IE7, but I think it's OK there.
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
==================
"FreakyJesus" <[email protected]> wrote in
message
news:fmi781$8el$[email protected]..
>I think it looks great. If i had any quibble it would be
it's too good an
>mage
> to waste mostly hidden.
> But now I see, though, that you've made it more visible
by removing the
> black
> bg in the table, and i think it's perfect as-is. If you
do want the image
> to
> appear only behind the table (i think that's what you're
describing) then
> you
> have to cheat a little. There are few methods but i
think the easiest
> might be
> to create a DIV the same width as the table. Give it
left and right
> margins set
> to auto (to centre it on the screen) and then make your
image the
> background to
> this DIV and make it fixed like before.
> Wrap this DIV around your table, and this will give you
the effect. But
> honestly, I think it's better as you have it now with
the image taking up
> the
> wider area. I love it.
>
> Andy
>

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

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.

When viewing some websites my desktop background image shows as the page background...why...and how do I fix this?

It seems that the current version of Firefox does not understand how to process style sheets. Instead of the stylesheet background color or image, I am now seeing my PC's desktop background image. This does not happen with IE or Chrome. When checking the error console, I get "Warning: Unknown property 'zoom'. Declaration dropped. Source File: http://trustserve.net/themes/ModernBlue/templates_cached/EN/global.css Line: 4"
I am not trying to zoom.
Any ideas on how to fix this. I can't use Firefox with these problems and I really liked it prior to these problems.

I thought I had it disabled. I enabled aero and then disabled to be sure, and still have the problem, but that was a very good idea. Thanks.
The problem started shortly after I installed two new programs, a graphics program, and an anti-virus. I just removed both programs and restarted the computer and that seems to have solved the problem. Your idea about Aero gave me the idea that one, or both of these programs changed some of my system settings. I am now going to install them, one at a time, and see if the transparency problem returns. I'll post my findings.

PNG fix for background images?

I am putting together an artsy-fartsy design with lots of
stylish wavy lines, fine gradients and dropdown shadow effects and
was wondering if there was a PNG fix for background images. Most
out there seem only to apply to images included in the html.
Otherwise I can use JPEGs with a bit of the background included
behind them (I hate doing this)...

Hi,
Hmmm. I think you have a great point there. In my opinion, I
think that there is no png fix for background images. Use jpegs
with background. I do the same.
Gaurav
www.gauravchandra.com

Fixed Background Image

Similar Messages

Maybe you are looking for