Background image not to full width on iPad

I am testing my new site created using Muse and all is working well. The only issue I seem to have is that on a desktop, the background image I have will fill any size browser window perfectly, right up to a full 27" on my iMac.
But on an iPad it just stops about half inch on right-hand side, leaving an ugly white strip.
I can't seem to resolve this - any ideas much appreciated.

Great, I revisited every page of the Muse file and found one that had some stray elements on the pasteboard to the right. I deleted these and hey presto, works perfectly on iPad now as well, background goes fully to the edges.
Many thanks.

Similar Messages

  • Background image not displaying 100% width of iphone

    Hi I am getting some strange behaviour on my iphone using firefox but displaying perfectly in firefox on computer.  I do not wish to submit the name of site as I do not want it to show up in search results but if anyone can help me I will pm site address.  Thanks.
    As the header's width is 100%, why is there the need for margin: 0 auto or text-align:center?  Surely  the background image should just display to 100% of the screen? Then the actual logo image that sits in the header div should have text align and margin auto yes?  I know that applying these rules this way does not center the logo within the div but WHY? I have uncommented out the text align and margin auto on the header div and it displays properly on my computer but not on the iphone.
    With regards to iphone the background image stops short of the logo by a small amount, I have not designed a separate style sheet for iphones, not part of the scope but as the rest of the pages display ok why does the background image stop just short of the logo image?
    I really appreciate your input.
    This is the CSS
    #header {
       width:100%;
      height:117px;
        padding: 0 0 0 0;
    /*    text-align:center;
        margin:0 auto;*/
        background:url(images/header-bg2.jpg) left repeat-x;}
    #header a img {
        border:none;
        padding:0;
        margin:0 auto;
        text-align:center;}
    <div id="header">
    <a href="http://www.xxxxxxxxxxxxxxx.com.au"><img src="images/KPS-logo.png" width="1024" height="117" alt="xxxxxxxxxxx Logo" /></a>
    </div>  <!--END of header-->

    You have nothing defining your background image size, just the box that holds it
    try adding some CSS to control the actual background image...
    background-size:cover;
    background-position:right top;
    background-repeat:no-repeat;
    background-atachment:fixed;

  • Backgrounds not displaying at full width on ipad

    Hi, I am new to muse but Ive been working with a template I purchased and the backgrounds do not go full width when viewed on an ipad even though they are set to 100% width on my muse file. There is a white space on the right side.
    Website is: roundcorner.ca and mezzalunadesign.ca
    screen shots are below.

    Great, I revisited every page of the Muse file and found one that had some stray elements on the pasteboard to the right. I deleted these and hey presto, works perfectly on iPad now as well, background goes fully to the edges.
    Many thanks.

  • Background image not displaying properly

    My site is not displaying correctly on mobiles and ipads.  I want my background image to span the width of most widescreen monitors but it's not displaying correctly.  I am sure I am doing something wrong.  Also have some problems with the map not spanning the width on some devices.  Any help greatly appreciated.
    Website:  cdic.us
    Thanks in advanced.

    Does it help if you change this:
    html, body {
        margin: 0;
        padding: 0;
        background-color: #F0F0E3;
        background-repeat: no-repeat;
    to this:
    html, body {
        margin: 0;
        padding: 0;
        background-color: #F0F0E3;
        background-repeat: repeat-y;
    Martin

  • Firefox 3.6.3 - ebay pages are centered, do not display full width of screen

    Upgraded to Firefox 3.6.3 and my ebay pages are centered and do not display full width of screen as they did in the previous version. Most other pages will automatically adjust to the full width of the screen
    == This happened ==
    Every time Firefox opened
    == Firefox 3.6.3 upgrade

    See if anything here helps you. <br />
    https://support.mozilla.com/en-US/kb/Images+or+animations+do+not+show

  • 7th gen nano syncs only certain songs, not my full library.  Ipad and old nano sync fine.  How do I get 500 songs v. 63?

    7th gen nano syncs only certain songs, not my full library.  Ipad and old nano sync fine.  How do I get 500 songs v. 63?

    **1. Separate these out first without deleting anything from i tunes libary?**
    iTunes:
    Set up 2 iTunes playlist, one for songs & the other for talking books.
    **2. Then simply transfer my 500 odd tracks of music to my new nano?**
    Connect new iPod to computer & set it to manually sync.
    Move your music playlist to Devices. Music will sync to your new iPod.
    *3. Once all this done, delete songs (only) from the old nano just leaving my talking books?
    Connect old nano to computer.
    Under Devices-Music: Start deleting all the songs including any song headings you have in the left column under Music. This will delete from the iPod yet leave your iTunes library intact.
    Read the iPod nano (5th generation) - User Guide for other suggestions.

  • div not extending full width

    I have a basic page built on the standard twoColFixLtHdr template that comes with CS4. Have created a new div #welcome that should extend across the whole width of the mainContent div, and the math adds up and the view layout guides shows everything in place. When you use Design Live View or a browser, there is a 20px white space at the right end of the #welcome block. I have just included the basic definitions below as I am sure this is something simple that my limited experience is not seeing. Thanks in advance for any/all advice or suggestions.
    .twoColFixLtHdr #container {
    width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    position: relative;
    top: 0px;
    left: 0px;
    *in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar}
    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
                    position: relative;
                    top: 0;
                    left: 0;
    .twoColFixLtHdr #container #mainContent #welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    width: 556px;
    position: relative;
    left: 0;
    top: 0px;
    background-image: url(../Images/welcome-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    float: left;

    By the way I just used the same css as yours and it is working fine for me:
    Following are the styles that I testerd for the said template:
    body  {
         font: 100% Verdana, Arial, Helvetica, sans-serif;
         background: #666666;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
    .twoColFixLtHdr #container {
    width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #header {
         background: #DDDDDD;
         padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .twoColFixLtHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    position: relative;
    top: 0px;
    left: 0px;
    /*in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar*/}
    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    position: relative;
    top: 0;
    left: 0;
    .twoColFixLtHdr #container #mainContent #welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    width: 556px;
    position: relative;
    left: 0;
    top: 0px;
    background-image: url(../Images/welcome-graphic-bkgrnd.gif);
    background-color:#330099;/*used this to see the div properly*/
    background-repeat: repeat-y;
    float: left;
    Are your all the styles same as this?
    Regards,
    Vinay

  • Grid not taking full width in Listbox in large device

    I am trying to create a listbox in which grid takes the full width of the device automatically and adjusts accordingly. But earlier it was not taking the full width and now it has stopped viewing items.
    Here is my code
    <ListBox Name="costList" HorizontalContentAlignment="Stretch" Grid.Row="2" Height="400" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid HorizontalAlignment="Stretch" Background="Black">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="0.3*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                    <ColumnDefinition Width="1*"/>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock Grid.Row="1" Grid.Column="0" Text="Groceries" Style="{StaticResource
    Content_Text}" Padding="2,0" Foreground="Black" Width="Auto" Height="Auto" HorizontalAlignment="Center" FontSize="16" VerticalAlignment="Center" Margin="2"/>
                                                <Image Grid.Row="1" Grid.Column="1" MaxHeight="35" MaxWidth="100"
    Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" Grid.Column="1" Text="$" Style="{StaticResource
    Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" InputScope="Number"
    MaxLength="6" PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center" FlowDirection="RightToLeft"
    Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                                <TextBlock Grid.Row="1" Grid.Column="2" Text="2%" VerticalAlignment="Center"
    Foreground="Black" TextAlignment="Center" Padding="0" Width="Auto" FontSize="16"/>
                                                <Image Grid.Row="1" Grid.Column="3" MaxHeight="35" MaxWidth="100"
    Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" IsHitTestVisible="False" Grid.Column="3" Text="$"
    Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" Grid.Column="3" IsHitTestVisible="False" HorizontalAlignment="Left"
    InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center"
    FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                                <Image Grid.Row="1" Grid.Column="4" MaxHeight="35" MaxWidth="100"
    Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                                <TextBlock Grid.Row="1" Grid.Column="4" Text="$" Style="{StaticResource
    Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                                <TextBox Grid.Row="1" IsHitTestVisible="False" Grid.Column="4" HorizontalAlignment="Left"
    InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center"
    FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>                            
                                </ListBox>
    List<string> demoList = new List<string>();
                for (int i = 0; i < 5; i++)
                    demoList.Add("Hello");
                costList.ItemsSource = demoList;
    Here demolist is just for testing purpose because I want to bind the textblock on leftmost column to it. Can somebody help?

    Hi RohitrkKumar,
    You’ve not posted the definition of ItemContainerStyle, so I used the default one with your code. I could see the item of ListBox control taking the full width of screen. I tested using snapped view and it worked fine.
    Please try and let me know the result. If you still cannot make it working, please post more information about your scenario.
    Regards,
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate
    the survey.

  • Div background to continue across full width of screen

    I'm trying to work out how to make the background colour / images of the various divs in my web pages, continue to the full width of the screen. An example of what I am trying to achieve is http://www.youknowwhodesign.com/ where Sarah Parmenter continues the blocks of colours horizontally across the screen.
    Apologies if this is covered elsewhere in the forum, but I don't know the correct terminology for what I am trying to do and therefore have not been able to find any helpful discussions.

    I did not look at the source code for the page you mention, they may do it another way, however you could create multiple wrapper divs and nest  the content divs, like so
    .wrapper     {
         width:100%;
         clear:both;
         overflow:hidden;
         background-image:url(yourimage.ext);
         background-repeat: repeat-x;
    .content     {
         width:950px;
         margin:0px auto;
    Then;
    <div class="wrapper">
    <div class="content">Rinse and repeat as required.</div>
    </div>
    Gary

  • Spry Menu Background image not working in IE

    I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
    SpryMenuBarHorizontal.CSS is below:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 800px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    ul.MenuBarHorizontal li a{
    color:#FFF;
    ul.MenuBarHorizontal li li{
    background-image: url(../images/menu_background1.jpg);
    ul.MenuBarHorizontal li li a{
    color:#000;
    ul.MenuBarHorizontal li li li{
    background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
    ul.MenuBarHorizontal li li li a{
    color:#FFF;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
    color:#33CCFF;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 160px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    text-decoration: underline;
    /* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    Remove the text-align:center; from the above style.
    Instead of centering your list element (li), center the link text (a) itself:
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    If you don't want the submenu text to be centered, do this immediately after the previous style:
    ul.MenuBarHorizontal ul a {text-align: left;}
    The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    that causes sub-submenus to fly out to the right of the submenus to which they attach.
    Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
    Beth

  • DIV Background image not displaying in FF

    Hi!
    I'm building a floated 3 column DIV layout with a wrapper to center the DIVs. I put a background image in the wrapper to give the appearance of the columns stretching to the bottom of the layout. It displays in IE, but not in FF.
    If I give the wrapper a height, the background image shows, but I want the layout to expand as I enter content. My code is below.
    I must be missing something. Any tips?
    CSS:
    #left {
    float: left;
    width: 200px;
    #middle{
    float: left;
    width: 200px;
    #right {
    float: left;
    width: 200px;
    #footer {
    background-color: #316262;
    float: left;
    width: 600px;
    clear: both;
    #wrapper {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(images/bkg_css_layout.gif);
    BODY CODE:
    <div id="wrapper">
        <div id="left">Content for "left" Goes Here</div>
        <div id="middle"> Content for"middle" Goes Here </div>
        <div id="right">Content for"right" Goes Here </div>
        <div id="footer">Content for "footer" Goes Here</div>
    </div>

    Turns out that I couldn't have a float on my footer with clear:both!
    FIXED! YEA!

  • Background image not cached in browser

    Hi,
    Using JDeveloper 11g R1.
    We have a template, with a PanelGroupLayout component with a background image, like follows:
    <af:panelGroupLayout layout="horizontal"
    inlineStyle="width:100%; height:2px; background-image:url(&quot;images/separacioRalles.jpg&quot;); background-repeat:repeat-x;"
    id="pt_pgl5">
    In runtime, the request made by the browser includes and _adf.ctrl-state=xxxxxx parameter, which I supose causes the browser not checking the cache.
    image/jpeg     http://127.0.0.1:7101/ViewController-context-root/faces/images/separacioRalles.jpg?_adf.ctrl-state=1bn1yq032y_79
    Is there any way to avoid this _adf.ctrl-state? or another way to set the desired background?
    Thanks,
    Roger

    Hi Frank,
    Not working fine at all.
    I tried as you said:
    <af:panelGroupLayout layout="horizontal"
    inlineStyle="width:100%; height:2px; background-repeat:repeat-x; background-image:url(&quot;/images/separacioRalles.jpg&quot;);"
    id="pt_pgl5">
    and this is the request received on the server:
    127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /images/separacioRalles.jpg HTTP/1.1" 404 1214
    Comparing with an af:image component:
    <af:image shortDesc="asdf"
    source="/images/help.gif" id="pt_i1"/>
    the request received on the server:
    127.0.0.1 - weblogic [28/ago/2009:10:39:58 +0200] "GET /ViewController-context-root/images/help.gif HTTP/1.1" 304 0
    If I put the contextroot in the background-image:url (background-image:url(&quot;/ViewController-context-root/images/separacioRalles.jpg&quot;), it works fine.
    127.0.0.1 - weblogic [28/ago/2009:10:44:28 +0200] "GET /ViewController-context-root/images/separacioRalles.jpg HTTP/1.1" 304 0
    So seems that the background image url is not built in the same way as using af:image component.
    Roger B

  • Background Image Not Visible in Browser

    I have searched the forum but I'm not finding a solution that
    works.
    I'm trying to put a background .png image in a header. It
    shows up in Dreamweaver but not in preview mode. I have an external
    style sheet that contains this:
    .twoColFixRtHdr #header {
    background-repeat: no-repeat;
    height: 126px;
    width: 770px;
    padding: 0;
    background-position: left top;
    margin: 0px;
    background-image: url(assets/pictures/banner_3.png);
    My page contains the following:
    <div id="header">
    <h1 class="banner_title_top">Text</h1>
    <h1><span class="banner_title_bottom">Text
    </span>
    <!-- end #header -->
    </h1>
    The ".twoColFixRtHdr" is coming from the fact that I'm using
    a pre-made Dw CSS layout.
    Any help is very appreciated.
    Jason

    Should have made no difference.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "j-hill" <[email protected]> wrote in
    message
    news:fb4cnk$fku$[email protected]..
    > Out of desperation I tried to convert my image to a .jpg
    and it seems to
    > be working fine.
    >
    > Thanks,
    > Jason

  • DIV Style background image not showing

    Hey Friends - can anyone take a look at line 136 to show why my background-image is not showing in this DIV Style?
    http://www.gratefulcreative.com/Andre_Madiz/index.html
    Thanks in advance!
    ken d
    creative director
    grateful creative
    www.gratefulcreative.com

    You have no width or height set for that element so it can not show an image unless you make the div at least the same size as the image.
    <div style="background-image:url(http://www.gratefulcreative.com/Andre_Madiz/images/bottom_text.png);ba ckground-repeat:no-repeat; width:871px; height:483px;">
    You may also want to consider adding this to your main css file and giving the div an id which will help you out in the future.

  • Background image not displaying

    I'm developing pages that will each have a different background image. i've defined a div with the bg image in it and put that div in the code, but the bg image doesn't show up. i've also tried adding a bg color to the div and that doesn't show up either, so i'm sure it's not a path or file name issue. css & code below.
    @import url("./whitespace-reset.css");
    @charset "UTF-8";
    body  {
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    #container  {
        width: 761px; /* the auto margins (in conjunction with a width) center the page */
        border: 0;
        text-align: left; /* this overrides the text-align: center on the body element. */
        height: 871px;
        margin: 0;
        padding: 0;
        background: #FFFFFF;
    #header  {
        height: 148px;
        width: 761px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    #leftside {
        width: 158px;
        float: left;
        margin-top: -38px;
        padding: 0px 0px 0px 0px;
    #leftside .menu img {
        display: block;
        margin: 0;
    #leftside  ul.menu {
        padding: 0px 0px 0px 0px;
        font-style: none;
        margin: 0;
    #leftside ul.menu li {
        display: inline;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
    #leftspacer {
        width: 31px;
        float: left;
        height: 723px;
        margin-top: -38px;
        padding-right: 10px;
        background-image: url(images/home_spacer_left.jpg);
        background-repeat: no-repeat;
    #top  {
        margin-top: 0px;
        height: 38px;
        padding: 0px 0px 0px 0px;
    #top ul.menu {
        margin-top: 0px;
        margin-left: 189px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        list-style: none;
    #top ul.menu li {
        display: inline;
        list-style: none;
        float: left;
        margin: 0;
        padding: 0;
    #bottom {
        height: 22px;
        left: 468px;
    #bottom ul.menu {
        margin-top: 300px;
        margin-right: -23px;
        float: left;
        margin-left: -61px;
        list-style: none;
    #bottom ul.menu li {
        display: inline;
        list-style: none;
        float: left;
    #mainContent  {
        margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
        padding: 0 0 0 0;
    #facilitiesContent {
        background: #990000 url(images/facilities_bg.jpg) repeat;
        padding: 0;
        height: 208px;
        margin: 0;
        width: 573px;
    #footer  {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#c0b7b2;
        height: 22px;
    #threepix {
        margin-left: 189px;
        margin-right: 0px;
        height: 114px;
    #col1 {
        position: relative;
    #col1-a {
        position: absolute;
        width: 275px;
        right: 0px;
        top: 0px;
    #col1-b {
        position: absolute;
        right: 0px;
        width: 275px;
        top: 0px;
    #pixcopyleft {
        margin-left: 189px;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #pixcopyright {
        font-size: 1em;
        margin-left: 189px;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #footer ul.menu {
        margin-left: 189px;
        margin-right: 0px;
        margin-top: -22px;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer ul.menu li {
        display: inline;
        list-style: none;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer  p  {
        margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        padding: 10 0;
    img.imageleft {
        float: left;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    img.imageright {
        float: right;
        padding: 5px 0px 5px 5px;
        text-align: right;
    .imagecenter {
        text-align: center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0px;
        font-size: 1px;
        line-height: 0px;
    h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: bold;
        margin-bottom: 3px;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Core PIlates Studio </title> 
    <link href="core.css" rel="stylesheet" type="text/css" /> 
    <body bgcolor="#c0b7b2" onload="MM_preloadImages('images/nav_main_ourteam_roll.jpg')"> 
    <!--[if IE 5]> 
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */ 
    .thrColFixHdr #sidebar1 { width: 180px; } 
    .thrColFixHdr #sidebar2 { width: 190px; } 
    </style> 
    <![endif]--><!--[if IE]> 
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */ 
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; } 
    .thrColFixHdr #mainContent { zoom: 1; } 
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ 
    </style> 
    <![endif]--> 
    <script type="text/javascript"> 
    <!-- 
    function MM_swapImgRestore() { //v3.0 
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    function MM_preloadImages() { //v3.0 
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
    <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
    </head>
    <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_programs_roll.j pg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main_ ourteam_roll.jpg','images/nav_main_contactus_roll.jpg')">
    <div id="container">
       <div id="header">   
        <img src="images/home_header.jpg" align="left" /><a href="index.html"><img src="images/home_logo_core.jpg"></a>     
      <!-- end #header --></div>
    <div id ="top">
      <ul class="menu">
          <li><a href="facilities.html"><img src="images/subnav_studio_facilities_down.jpg" class="menu"></a></li>
           <li><a href="rates.html"><img src="images/subnav_studio_rates_up.jpg" class="menu"></a></li>
           <li><a href="hours.html"><img src="images/subnav_studio_hours_up.jpg" class="menu"></a></li>
           <li><a href="policies.html"><img src="images/subnav_studio_polocies_up.jpg" class="menu"></a></li>
           <li><a href="directions.html"><img src="images/subnav_studio_directions_up.jpg" class="menu"></a></li>
           <li><a href="contact-us.html"><img src="images/subnav_studio_contactus_up.jpg" class="menu"></a></li>
           <li><img src="images/subnav_studio_back.jpg" class="menu"></li>
      </ul>
      <!-- end #"top" --></div>
      <div id="leftside">
    <ul class="menu">
          <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
          <li><a href="programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/nav_main_programs_roll.jpg',1)"><img src="images/nav_main_programs_up.jpg" name="programs" width="158" height="39" border="0" id="programs" /></a></li>
          <li><a href="the-studio.html"><img src="images/nav_main_thestudio_down.jpg"></a></li>
          <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
          <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
          <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact us" width="158" height="39" border="0" id="contact us" /></a><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our team" width="158" height="39" border="0" id="our team" /></a></li>
          <li><img src="images/nav_main_space_below.jpg" /></li>
          <li><a href="mailto:[email protected]"><img src="images/home_email.jpg" /></a></li>
          <li><img src="images/home_address.jpg" /></li>
          <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
       </ul>
    <!-- end #leftside --></div>
    <div id="leftspacer"></div>
    <div id="facilitesContent">
    <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
          <h1 align="right">What is Pilates?</h1>
          <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
        <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
        <h1 align="right">What is Pilates?</h1>
           <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
      <!-- end #facilitiesContent --></div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
       <ul class="menu"> 
           <li><img src="images/nav_bottom_left_space.jpg"></a></li>
           <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"></a></li>
           <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"></a></li>
           <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"></a></li>
           <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
           <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"></a></li>
           <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"></a></li>
           <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"></a></li>
       </ul>
      <!-- end #footer --></div> 
    <!-- end #container --></div>
    </body>
    </html>

    Start by fixing the code errors.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elixir.biz%2Fcore%2Ffacilitie s.html
    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. elixir.biz%2Fcore%2Ffacilities.html
    Your document type doesn't match your HTML closing tags.  Modify > Page properties > Encoding > choose either HTML or XHTML (transitional) and hit Apply.
    Images require an alt attribute for better web accessibility. If you want to skip this for now and add them later, that's OK.
    but your code won't validate until you add them to each image.
    When you've fixed the code errors, repbulish the page and see if that fixes the problem.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

Maybe you are looking for