Footer background image stretching width of screen

I want to stretch my footer image the full width of the screen to mirror my header. It's easy for the header, as you simply designate this the body background image. The footer is different owing to differing page lengths. Is the only way to do this to take the footer div out of the container div?

Hi pziecina,
Actually, I found a simpler solution by creating a wrapper div for the footer outside the container div. I cannot be bothered to utilize CS3 yet and I absolutely hate conditional comments for IE...
This tutorial explains how to do it:
http://www.sohtanaka.com/web-design/achieving-liquid-backgrounds-with-fixed-content/

Similar Messages

  • Background image stretch in html not working if 'never remember history' is choosen

    I have a problem that did not exist in previous mozilla versions. I found the problem after installing the most recent version and after setting firefox to "never remember history"
    The problem is related to the CSS code for stretching a background image to fit the screen. The background image does stretch if "never remember history" is NOT set. Only part of the image is displayed and the rest of the background is black. I first noticed it with my website www.missionbayhighalumni.com and later found that the same problem also occurred with this website:
    http://www.htmlite.com/faq022.php or http://www.htmlite.com/faqEX004b.html
    I created several test cases with very simple code, all had the problem. The background image stretch code tests all work for other browsers and even firefox if "never remember history" is not selected. It also appears to be intermittent.

    Looks fine to me and all containers have a height:100%, so that is also correct
    You can remove all data stored in Firefox from a specific domain via "Forget About This Site" in the right-click context menu of an history entry ("History > Show All History" or "View > Sidebar > History") or via the about:permissions page.
    Using "Forget About This Site" will remove all data stored in Firefox from that domain like bookmarks, cookies, passwords, cache, history, and exceptions, so be cautious and if you have a password or other data from that domain that you do not want to lose then make sure to backup this data or make a note.
    You can't recover from this 'forget' unless you have a backup of the involved files.
    It doesn't have any lasting effect, so if you revisit such a 'forgotten' website then data from that website will be saved once again.
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
    *Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
    *Do NOT click the Reset button on the Safe Mode start window
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

  • [Solved] -Change the background image of gdm login screen.

    When I first installed Arch I found that the default background image of gdm login screen ( or lock screen ) didn't look good with the desktop image that I had, so when I installed I looked for a way to change this. Sadly I could not find any direct and easy way, I looked in forums, I looked in gconf-editor and I could not find any relevant information about it. So I decided to look for the file and change it.
    This was not the best option, clearly since now that I installed Gnome 2.30 it replaced the image with the old one and I had to change the file again. Since maybe some other people are having similar problems I thought I could just post the place where gdm is looking for the file, and if somebody has any suggestions about how to change it with a better way, I would welcome it .
    After the longest intro to a directory, here it is: /usr/share/pixmaps/backgrounds/gnome/background-default.jpg
    Thank you .
    Last edited by agomezh (2010-04-11 18:53:09)

    Not to belabour the point, but after much hair pulling, I stumbled upon the following method, and it works perfectly. It sets the default background (for GDM login, Lock, desktop...etc.) for Gnome to whatever you want--even new users get the new default background on their desktop, although they can obviously change it, this is only the default. The page also shows a method of doing the same as gnome-appearance-properties method with just gconftool-2. I hope this doesn't just cause confusion.
    [Note: It still has to be run as root of course. I used sudo.]
    http://library.gnome.org/admin/system-a … n#gconf-20
    gconftool-2 --direct \
    --config-source xml:readwrite:/etc/gconf/gconf.xml.defaults \
    --type string \
    --set /desktop/gnome/background/picture_filename some_picture_filename.png

  • Background image sizing for all screen sizes

    How do I make my background image conform to different size screens?  I had it set for my 27" monitor but it looked horrible on my laptop so I made it smaller and its still not fitting my laptop scree and it looks so small on my 27' now its horrible there.  Please help???

    Hello,
    I would suggest you to use this image as the browser fill.
    You can check the links about browser fill:
    Add an image to the background of the page or browser | Adobe Muse CC tutorials     Check from 2:00
    https://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
    Regards
    Vivek

  • Using the CSS tab, how do I make the background image stretch as.....

    ... as opposed to repeat.
    Thanks!

    "motleyscrewed" <[email protected]> wrote in
    message
    news:gan8i5$6t9$[email protected]..
    > ... as opposed to repeat.
    Are you talking about a real image in the markup (an img
    "tag") or about a
    background image?
    Background images do not stretch, real images will resize to
    whatever
    dimensions you set for them in the styles sheet.
    As a side note, IE has a filter that allows "background
    images" (note that
    they are not really background images) to stretch (Google
    "AlphaImageLoader
    scale").
    Thierry
    http://www.TJKDesign.com/go/?0
    | Articles and Tutorials
    http://divahtml.com/products/scripts_dreamweaver_extensions.php
    | Extensions
    that keep your markup clean
    http://webassist.com/professional/products/productcategory.asp?CID=8
    | CSS
    Sculptor, CSS Menu Writer, etc

  • How to make a background image stretch?

    I notice there are two options for background option "tile" and "original size". What happened to stretch? I would like the background image to take up the whole page no matter what size the browser window is. Easy enough to do with CSS and HTML. Any ideas on how to do this, am I missing something, or can I employ some sort of trick to achieve this? Thank You : )
    Regards,

    It's available for the Page background in the Inspector/Page/Layout pane but not for the Browser background.
    Click to view full size
    OT

  • The background image on the login screen is just a blur, the background image wont come up how do I fix it?

    Why is the back ground image like this? is it supposed to be blurred? I've tried almost everything to change it but never comes out right.

    Please try manually updating Firefox.<br>
    To do so, please download to most recent version from [http://www.mozilla.org/en-US/firefox/new/ our website].
    Do this fix the updating issue and the Flashplayer issue?

  • How can I stretch a background image in label?

    Hi,All
    How can I stretch a background image in a label?
    public void start(final Stage primaryStage) {
                 final Label lbTest = new Label("My Test Label");
                 lbTest.setAlignment(Pos.CENTER);
                 lbTest.setTextAlignment(TextAlignment.CENTER);
                 lbTest.setStyle("-fx-background-color:red;-fx-background-repeat:stretch;-fx-background-position:center top;-fx-background-image:url(\"http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/BlueMarble-2001-2002.jpg/640px-BlueMarble-2001-2002.jpg\");");
                 final HBox hbox = new HBox();
                 hbox.setId("MyRootPane");
                 Button btnLeft=new Button("Left Button");
                 Button btnRight=new Button("Right Button");
                 hbox.getChildren().addAll(btnLeft,lbTest,btnRight);
                 final StackPane layout = new StackPane();
                 layout.getChildren().add(hbox);
                 Scene scene = new Scene(layout, 600, 320);
                 lbTest.prefWidthProperty().bind(scene.widthProperty());
                 lbTest.prefHeightProperty().bind(scene.heightProperty());
                 primaryStage.setScene(scene);
                 primaryStage.show();
        }this code doesn't work,if I deleted css -fx-background-repeat:stretch;the background image stretched but repeated,I want to let the background image stretched and no-repeated,it can be stretched with the resizing window automatically.

    Try -fx-background-size: stretch;

  • Having trouble making background image editable in template

    Hello this is my first time so here goes...
    I would like to make a template from a page I have created,
    the trouble is the background image is url background image placed
    in css with text over the image, the problem I have is on further
    pages I would like to keep same divs
    but would like the freedom to change text and bground image.
    I have tried to make text an editable region which works and
    bground image make attribute editable but I do not really
    understand how this works any ideas would be much appreciated here
    is my site address
    http://www.andysite.prohost4u.co.uk
    cheers

    I'm confused, I dont see that you have a background image in
    your css.
    "WILLO THE WISP" <[email protected]> wrote
    in message
    news:[email protected]...
    >
    Hello this is my first time so here goes...
    > I would like to make a template from a page I have
    created, the trouble is
    > the
    > background image is url background image placed in css
    with text over the
    > image, the problem I have is on further pages I would
    like to keep same
    > divs
    > but would like the freedom to change text and bground
    image. I have tried
    > to
    > make text an editable region which works and bground
    image make attribute
    > editable but I do not really understand how this works
    any ideas would be
    > much
    > appreciated here is my site address
    http://www.andysite.prohost4u.co.uk
    > cheers
    >
    >
    > Here is my css
    > * {
    > margin : 0 auto;
    > padding : 0;
    > }
    > body {
    > background-color : #ffffff;
    > text-align : center;
    > font-family : "Square721 BT", "Staccato222 BT", Courier;
    > font-size : 100%;
    > background-position : center center;
    > }
    > #container {
    > font-family : "Square721 BT", "Staccato222 BT", Courier;
    > background-color : #ffffff;
    > width : 780px;
    > }
    > #header {
    > width : 780px;
    > height : 280px;
    > margin-top : 10px;
    > margin-bottom : 10px;
    > }
    > #content {
    > background-image: url(images/content_bground.gif);
    > float: left;
    > height: 400px;
    > width: 430px;
    > }
    > #content h1 {
    > font-size : 115%;
    > width : 390px;
    > color : #00ccff;
    > text-align : left;
    > padding-left : 60px;
    > padding-top : 40px;
    > padding-bottom : 10px;
    > }
    > #content p {
    > font-size : 80%;
    > width : 310px;
    > text-align : justify;
    > text-indent : 20px;
    > color : #66FFFF;
    > }
    > #content h2 {
    > font-size : 80%;
    > width : 420px;
    > color : #00ccff;
    > text-align : left;
    > padding-left : 60px;
    > height : 70px;
    > padding-top : 10px;
    > }
    > #sidebar {
    > background-image : url(images/sidebar_bground.gif);
    > width : 340px;
    > height : 400px;
    > float : right;
    > }
    > #sidebar ul {
    > font-size : 60%;
    > line-height : 22px;
    > list-style-image : url(images/bullet.gif);
    > list-style-position : outside;
    > text-align : left;
    > color : #66FFFF;
    > padding-top : 45px;
    > padding-left : 62px;
    > }
    >
    > #clear {
    > clear : both;
    > }
    > #footer {
    > background-image : url(images/footer_bground.gif);
    > width : 780px;
    > height : 80px;
    > margin-bottom : 10px;
    > margin-top : 10px;
    > position: fixed;
    > }
    > #footer p {
    > text-align : center;
    > font-size : 75%;
    > color : #66ffff;
    > padding-top : 24px;
    > }
    > #footer ul {
    > margin : 2px;
    > }
    > #footer li {
    > display : inline;
    > margin : 0;
    > }
    > #footer a:link, #footer a:visited {
    > color : #00ccff;
    > margin : 2px;
    > }
    > #footer a:hover, #footer a:active {
    > color : #00FFFF;
    > text-decoration : none;
    > background-color : #33cccc;
    > }
    > a:link {
    > color : #00ccff;
    > text-decoration : none;
    > }
    >
    > a:visited {
    > text-decoration : none;
    > color: #00CCFF;
    > }
    > a:hover {
    > text-decoration : underline;
    > color: #00FFFF;
    > }
    > a:active {
    > text-decoration : none;
    > color: #006699;
    > }
    >

  • 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;}

  • Washed out background image on Treo Pro

    Hi:
    When I set my background image on my today screen (check the box in settings, browse to image - use 320x320 resolution) I get a "washed out" version of the image regardless of its original color, tone or intensity. Images from the preinstalled themes are fine - vibrant and clear - but the user set images are very light (almost like a 50 percent transparency in Photoshop for example). I have tried both .jpg format and .png. Backlight settings do not cure this either.
    Any ideas?
    Thanks.
    Post relates to: Treo Pro T850 (Bell)
    This question was solved.
    View Solution.

    Hi Again:
    Upon further investigation, I have discovered that the options for setting background and transparency levels is found through the pictures and videos explorer not the file explorer.
    As suggested I have set the transparency to 0 and the image (Crab Nebula through the Hubble space telescope) is as bright and vibrant as it should be.
    Thanks again for the direction - it's much appreciated.
    Post relates to: Treo Pro T850 (Bell)

  • 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?

  • Can you "bleed" a background image through a DW template?

    I'm in the process of redesigning a simple site and am fairly new to working with DW. I created a template with navigation along the left side and a content box on the right. The client requests a background image (which I set in the CSS body tag). However, once I set the content portion of the template it sits on top of the background image (effectively blocking out portions of the background image). I need it to "bleed" through so that the background image covers the entire screen content.
    Example: http://www.mchenrycac.org/test/index.html (or see image in the attachment)
    Can anyone suggest how to get the image to show through the content portion of the template?
    Russ

    It took me a few "tries" to place the code in the right place (and a few
    different iterations of the example given on the site) but the opacity tag
    does work as suggested. Setting the opacity to 100% allows the entire
    background to bleed through as I needed.
    I had to completely remove the suggested CSS tags for IE7 and IE8 however
    and go with just the opacity tag. Tested this in IE8 and Firefox and both
    display the opacity correctly with the single opacity statement:
    .opaque
    The class was added to the table statement in my template (the table that
    contains the content area for every web page) and works beautifully. Thank
    you for the quick response...
    Russ

  • Background images in Captivate 6.0

    We have created a simulation in Captivate 6.0 for an SAP system. The issue we have is sometimes even after advancing to a new step, we still get to see the background image of the previous screen. This issue is intermittent and there is no consistency and randomly only few slides have this issue. Is this a known issue? Does anyone have a workaround? Please suggest. Thanks.

    Hello,
    Did you try to change the slide quality from the default Low (up till 6.1 this was default) to Optimized (now default in 6.1 and later)? That change solved that kind of problems for some users, even yesterday answered a similar thread.
    Lilybiri

  • Agentry - WPF Background Image

    I am using the Agentry WPF client v7 with SMP3.  I am also using the Agentry editor v7 to develop the application.  I am trying to add a background image to a detail screen for the WPF client.  I have targeted the Windows 1024x768 platform and selected the appropriate background image.  The screen appears correctly in the screen preview in the Agentry editor.  However, when I run the app in the Agentry WPF client the background shows up as all white and the background image does not display.  Can anyone think of what I could be doing wrong?

    You aren't doing anything wrong, it is just that the WPF client does not yet support background images.  That feature just hasn't been implemented yet on the WPF client.
    Sorry,
    --Bill

Maybe you are looking for