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

Similar Messages

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

  • 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

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

  • How to stretch the header the full width of the screen?

    I am trying to stretch the header which is a fluid grid layout div wrapped between body. I have something like the following:
    html
    <body>
    <div class="wrapper">
      <div class="gridContainer clearfix">
    <div id="header </div>
      </div>
    </body>
    CSS
    #header {
    clear: both;
    float: left;
    margin-left: 0;
    min-width: 100%;
    display: block;
    Any help would be much appreciated.
    KN

    Use this CSS:
    .wrapper {
        width: 100%;
    #header {
        display: block;
        text-align: center;
    And use this HTML:
    <div class="wrapper">
        <div class="gridContainer clearfix">
            <div id="header"><h1>Header</h1></div>
        </div>
    </div>
    This should stretch to full width.
    Good luck.

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

  • Extending div's across the width of the browser

    I wan't to extend some div's across the width of the browser, for eg: background colors. My container has a max width, so its not straightforward. If I remove that constraint, I lose the ability to demonstrate the max width behavior, which I don't want either.

    Yeah, the grid in reflow is really just a visual and snap aid, it doesn't have any implications except for the min/max width in relation to the breakpoints. We use a lot of full width background images which don't really snap to the area outside the grid unless they're set to body, but want full page or at least much wider than half a gutter (via show outer gutter) content images and bgs. 
    So it really depends on the min col grid you need and the hard 16 col limit is an issue for a grid that that has a higher common multiple for it's column variations. I.e. a 5 and 3 column design would need 15 for the content and 2 for the outside margin but that's over the limit.
    For simplicity's sake we've moved to mostly 2-4 column designs which we can make work with a max 12+2 cols, but you have to figure out multiples that work out cleanly while maintaining a natural looking relationship of content to margins.
    For that reason, and because of the platform on which we build most projects (NationBuilder) requiring a sidebar,  we've gone heavily to 3,2,1 col layouts which we can break into just six layout cols.
    But another workaround we're using is to flop the grid and gutters so that we have 7 gutters of 12% and 6 cols of 4%. The grid is largely just a visual aid so it doesn't seem to have any implications so far. The issue we were having was that the outside gutters are only half width which doesn't work for our designs which tend to have a lot of common match ups and lineups. In that case you have the larger gutters which have a central snap guide as well which you may be able to repurpose to many more cols if you can come up with a clean grid is a lot of experimentation or a spreadsheet, the only way we were able to calculate all our variables into nice round numbers…
    The simplest fix though is probably a lifting of the arbitrary limit on number of columns. I saw on another thread the devs were willing to consider that, they just needed a solid usecase to do so. A grid that accounts for a design with both 4 and 5 columns in it would require at least 20 cols, and 2 extra on the outside would probably be pretty useful so a 24 col max should allow for almost all contingencies…

  • Div full width with narrower container

    Is there any way to create for example a menu bar that is the full width of the screen when your container is say 960px as I can't see that it's possible.
    I think for this to be possible you would need to be able to add divs to the body element before the default container div, and then be able to add a container within this new div.

    Your question sounds very similar to this idea:
    http://forums.adobe.com/ideas/2664
    Maybe you can write your use case in the comments there and add you vote!

  • How do I create a web mock-up using Full Width Photo's

    Greetings & Help!
    I'm trying to create a full width photo layout using
    Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.
    Exactly as the following websites - which all seem to be
    using the same size of photo or very close to it.
    This site is static with full width photos that are not tall.
    http://www.jenniferhandyproperties.com/selling
    This site is static for the most part and full width photos
    that are not tall
    http://www.gnvpartners.com/web/
    This site is Flash with full width photos that are not tall.
    expodesigncenter
    I would love to create a flash site just like expo but at
    this point I would settle for a static photo with the same size
    being the same on each page.
    Also I would like my site to be a liquid layout so the photo
    and everything else (text, Links etc) on the page flows correctly.
    The problem...
    I'm trying to use photo's from Istockphoto.com. The size of
    the photo's they offer are
    425 x 282 px (5.9" x 3.9")
    849 x 565 px (11.8" x 7.8")
    1698 x 1131 px (5.7" x 3.8")
    I'm selecting horizontal photo's. I do not know how to match
    the same width, height and appearence as the websites I mentioned
    above.
    If I choose a photo that fits the width then the length is
    too long. Also if I choose a large photo and have to crop it then
    most of the detail of the photo is lost.
    I'm attempting to create a mock-up for my web in Fireworks
    CS3 and after search Adobe and www I came across the mock up should
    be 1004px which would end up being 1024 with vertical scroll bar
    and small margins.
    I also have Photoshop & Flash CS3 but should mention (if
    you haven't already guess it by now) I am a rookie when it comes to
    creating a website.
    So if you can offer a solution in "Non-Tech Terms" I would
    appreciate it.
    Thank you in advance for your time.

    Hi Pixlor -
    I'll do my best to answer your questions - within my ability
    - which isn't much.
    As far as "Tile" the photo - I've checked out the responces
    I've received from other's on this post - and other posts - and on
    each page for the "masthead" I just want one photo to be the same
    size of the page width wize - and the height of the photo should
    not be tall from the top of the masthead to the bottom of the
    masthead. As far as what I mean by "not being Tall" - see next
    comment...
    I'm just attempting to duplicate exactly (or very close to
    it) the same appearence and dimensions - "Width = side-to-side,
    Tall = Height - as the websites I mentioned in my first post here.
    Also if you check out Joey's website (who responded to my
    post as well) basicly he has created the same thing that I'm
    shooting for except he is using graphics. I have to use photos in
    my masthead which will be of kitchen cabinetry or construction
    photo's and must highlight every detail down to the shine of the
    kitchen cabinets knobs - or close to it.
    Due to this I can not have the photos of the masthead "tile"
    from "width-to-width or top-to-bottom because the deatils in the
    photo can not repeat or multiply to completely fill the masthead
    head. Otherwize if I choose a photo of kitchen cabinetry which
    highlights a kitchen sink - and if I tile this photo - from what
    I'm learning from everyones responce thus far - I'll end up with
    several of the same kitchen sinks and cabinets in the same photo.
    I must stress I could be wrong in what I described directly
    above due to my lack of tech knowledge! If this post was about a
    2x4 or 2x6 or Green Building or what have you, It would be heck of
    alot easier for me to completely understand what you pro's are
    trying to help me with - which I completely appreaciate. Expecially
    someone like you who owns a monitor the size of one of my work
    trucks!
    Which brings me to your next question...
    Liquid layout -
    Yes I am trying to end up with a liquid layout for my website
    using Dreamweaver CS3. Hopefully using one of the pre-built liquid
    layouts in Dreamweaver and modify it within my ability.
    The main reason why I would like to create a liquid layout is
    because most others construction firms in my industry - and in my
    target market - have websites that completely consume a viewers
    monitor - viewport - screen real estate - (i'm trying to learn your
    tech terms) no matter what size viewport a viewer has, or how the
    viewer resizes theirs.
    I've also heard that a "Min & Max" code can be included
    in a liquid layout so that it would limit the "liquidness" of the
    layout so "Text Lines" won't stretch too long making it difficult
    to read when a viewport size extends - and when the viewport shinks
    - all the elements (or Div's) will reflow an maintain order and
    visability.
    1004 -
    The only reason why I mentioned designing the Fireworks CS3
    mock-up at a 1004 is because someone else mentioned they design
    their mock-ups at a "Canvas Size" of 1004. Then most browsers
    automaticly inlclude a scroll bar if the vertical content exceeds
    below "The Fold". Thus with the addition of the automatic scroll
    bar the page now becomes 1024 - according to this person.
    She went on to mention according to "recent studies" - 56% of
    viewers have 1024 x 768 and most computer manufacturs shipp them
    this way. Then the following stats... 22% at 800 x 600, then 13% at
    1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She
    also mentions most avearge viewers (every day Dick & Jane, Bob
    & Besty) (excluding computer tech folks like yourself) - do not
    resize - bother with - or know how to resize their viewport.
    My personal note on this is most of my target market -
    clients - just turn on their computer and surfs the net from
    website to website without changing their viewport and when also
    asked they "Feel" that a website looks much better - or more
    profeshional - when the content completely fills up an entire
    viewport.
    "Feel - not - Think" -
    Keep in mind I choose the word "Feel" & not "Think". In
    my target market - Residential Construction - 95% of home
    improvement decisions are made my the Woman of the houshold - not
    the Man. That being in mind it is a proven stat (and not a sexest
    comment) that women base most of their choices or decsions on how
    something makes them "Feel". Where as most men make their choice or
    decision on how they "Think".
    Also most men attempt to keep their women happy and knowing
    that if they don't then they will end up in the doghouse - ( not a
    fun place to be trust me on this) and in addition most men do not
    have much of a clue when it comes to the interior design layout of
    a home, matching of paint colors, appliance choices or what have
    you.
    Wow that was a major side track I took -
    Back to 1004 -
    It's not that I'm intend in designing the mock-up in
    Fireworks at 1004 - I just want to end up wth a liquid layout so
    when my site is viewed by "most people" then my site will
    completely consume a viewers viewport - or very close to it.
    If I need to design the mock-up less then 1004 - or more then
    - and still be able to end up with the same end result in a liquid
    form - so be it.
    I don't know the best way to proceed -
    I'm just attempting to learn from others who respond and for
    the most part those who have been kind enough and taken the time to
    respond seem to be very knowlegeable about my issue at hand.
    You might find this hard to believe but I am learning quite a
    bit from all of you and I really do appreaciate it.
    Well now that this responce is as long as the novel "War
    & Peace" - I'll close here.
    Travis

  • How do I create full width photos for a website with Photoshop - Fireworks - Dreamweaver CS3 ?

    Greetings & Help!
    I'm trying to create a full width photo layout using Photoshop or Fireworks CS3 and then end with Dreamwaver CS3 without the photo's being tall.
    Exactly as the following websites - which all seem to be using the same size of photo or very close to it.
    This site is static with full width photos that are not tall.
    http://www.jenniferhandyproperties.com/selling
    This site is static for the most part and full width photos that are not tall
    http://www.gnvpartners.com/web/
    This site is Flash with full width photos that are not tall.
    expodesigncenter
    I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.
    Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.
    The problem...
    I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are
    425 x 282 px (5.9" x 3.9")
    849 x 565 px (11.8" x 7.8")
    1698 x 1131 px (5.7" x 3.8")
    I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.
    If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.
    I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.
    I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.
    So if you can offer a solution in "Non-Tech Terms" I would appreciate it.
    Thank you in advance for your time.

    In the second example, the photo is set to background with a tile. The other parts are over top of the photo and done with layers with a background color setting.

  • Div background color not showing in Internet Explorer 8 and before

    My Footer div is not showing the background color (supposed to be black...)  in Internet Explorer 8 and earlier.  It's assuming the body color instead.  Also the border color on top of the 'bubbles' that run across the page is wrong (supposed to be blue)    Is this just because Internet Explorer 8 and earlier did not support div background and border colors yet, or is there a work-around??  Or maybe I did something wrong?
    The site is:    www.meridianwaterfiltration.com

    martcol wrote:
    I don't think that IE8 does rgba.
    It should be OK with rgb but not rgba.
    Martin
    No its doesnt
    I'd just use a hexidecimal color - black #000 and blue: #03f (see below)
    .footer {
    position: relative;
        width: 100%;
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 0px;
        padding-left: 0;
        background-image: none;
        background-repeat: repeat-x;
        margin-top: 0px;
        clear: both;
        height: 350px;
        background-color: #000;
    #bubble {
        background-image: url(Images/water drop 0banner.jpg);
        background-repeat: repeat-x;
        width: 100%;
        height: 43px;
        border-top-width: 3px;
        border-top-style: solid;
        border-top-color: #03F;
        margin: 0px;
        padding: 0px;
        background-color: #3FF;

  • Full width headers

    hello,
    i know this should be basic but i have a full screen slideshow and i need a header bar and footer bar top & bottom of the screen.
    the header and footer will not stretch full width only the width of the page.
    the header did at first but only when "sticky footer" was unchecked until i added the footer and need it to stay at the bottom.t know what to do
    any help would be appreciated as i am on deadline
    i'm sure it's a simple fix but just unsure how to fix it
    thanks

    In previous releases you could "Snap" the edges of a div (box) to the sides of the gray-outermost area of the stage. This would "Snap it to Full screen width". That still works. But, I think your problem is that the item you want to scale, is an image. So, make a new div (box) and then place your image inside it as a "background fill" re-stretch the box to the sides, or click on the new "100% Width" layout feature. You should get the results you were looking for.
    [email protected]

  • Website Background not extending across screen in smaller screen sizes

    Hello, Ive created a website that the background extends across the entire width of the screen regardless of size.
    But Ive notice on some screen sizes, mostly the smaller ones, part of the background does not continue across.
    It does not seem to matter which browser Im using.
    The site is www.farleysjewelers.com
    If anyone has any suggestion or can help me figure out why, that would be great.
    Sincerely, Sam Barnhart

    Sam: post this question in the dreamweaver forum.
    http://forums.adobe.com/community/dreamweaver
    G

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

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

Maybe you are looking for

  • How do I get my pictures to be in cronological order on my cloud?   I want them in the order I took them not size order?

    I backed up all the pictures from my phone to the cloud.  But they are in size order.  I want them all in the order I took them chronological order.  It is no good if they are all over the place.

  • Fonts malfunctioning in Photoshop CS5

    Hi, I've got a problem with certain fonts in Photoshop CS5 running on Windows 7. Normally in the drop-down menu of the fonts list, there's an "O" or "TT" symbol next to each font to signify if it's OpenType or TrueType respectively. However, there ar

  • PDF Form Problems

    Using AcrobatPRO 8.2.3 on a MAC, Trying to create a PDF Form to email to potential customers. I have two basic issues. Locally (on my MAC) everything works perfectly, even the "submit" button, and it emails the PDF just fine. However, when I send the

  • Authorization to FBL5N report .

    Hi All, Plz help me. I need to put authorization on FBL5N report on basis Customers. eg. a person in Mumbai(mumbai branch) should not be able to view data of customers in Goa(Goa branch). Thanks. Points will be granted for effective answers. Bye.

  • CS6 Installer Error

    When trying to install/re-install CS6, I receive the following error; Adobe Installer We've encountered the following issues Installer failed to initialize. Please download Adobe Support Advisor to detect the problem. Well, I installed the advisor, r