Full width background photo

want to have photo image to fill window, can't get photo border to turn red when sizing to web frame

Are you snapping to the left and right, or the top and bottom? The elastic width feature only applies to width. To have a full screen image (in both width and height), a browser fill or full screen slideshow can be used.
If you're attempting to snap to left and right and the red highlight is not appearing, are "Smart Guides" turned on in the View menu? The red highlight is actually not anything special about making an item 100% width, per se. It's just the Smart Guide highlight appearing when the object's edge aligns with the edge of the browser window area. If Smart Guides are turns off, there won't be any snapping or highlighting.

Similar Messages

Full width background with header and float

I have been upgrading a web page to HTML5. I would like to place a PayPal button on the right side of the screen inline with a header. I am almost there. See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.
What's missing is the background. I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.
Suggestions?
Thanks!

brb1 wrote:
I have been upgrading a web page to HTML5. I would like to place a PayPal button on the right side of the screen inline with a header. I am almost there. See the "FreeAXP Support" line at http://home.earthlink.net/~msi1/FreeAXP_HTML5.html.
What's missing is the background. I would like it to extend across the entire line, as it does on the Legacy Hardware Virtualization line above and the FreeAXP Links line below.
Suggestions?
Thanks!
Because the elements are displayed inline especially the h2, it is automatically shrunk to fit the contents of the element. Therefore, as it stands, you won't be able to extend it unless you insert a width of 97% to that specific h2.
However, there is another way to do it.   You could wrap the both items in a <div id="special"> </div> so that it looks like this:
<div id="special" style="background-color: #F5F4FA">
<h2 id="Support" style="display: inline;">FreeAXP Support</h2>
                <form class="PayPal-h2" style="display: inline; float: right;" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <input type="hidden" name="cmd" value="_s-xclick"/>
                    <input type="hidden" name="hosted_button_id" value="BK4Y2PTKPRMK2"/>
                    <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif"
                        style="height:15px; padding-top:3px;" alt="PayPal - The safer, easier way to pay online!"/>
                    </form>
</div>
HTH

Why is my pinned, full width background showing briefly above other layers in safari as I scroll?

cmmconstruction.com

Awesome, I'm going to try your 2nd solution and see how that works.
Your 3rd idea is how I have it set up currently. Ideally it should work but thats why it must be a Muse / Safari issue. No problems using chrome.
will let you know,
Thanks again!
D

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.

How do I create a Full Width Photo for a Liquid Layout - CS3

Greetings & Help!
I'm trying to create a full width photo layout 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.

Greetings & Help!
I'm trying to create a full width photo layout 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.

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

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.

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

How can I create an adaptable full-width site with sliding parallax panel?

Hi guys!
I have to create a web site with a full-width resolution, adaptable with any monitor and resolution using some panels that moves using the parallax scroll-motion with a sliding effects.
For example I nedd a site like "collecdiv.com" that works with the same effects and with an adaptable full-widht size page.
Here's some screen I take of my site with a 22" 1920x1080 resolution and a 15" 1280x1024.
The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
How can i resolve the problem? How can I fix the screen so anyone else can see my site without problem and with all the resolution?
Who can help me? PLEASE
Thanks in advice
Francesco
P.S.: an advise... check the site "www.collecdiv.com" to see what I nedd

I'm adding this screenshot so you can understand the problem... The 4 tab I want to see in full width and in scroll motion parallax: four with a resolution of 22" and the other four with a resolution of 15" (the screen are made with paint to let you see what is the problem)
In the first tab there's a slideshow widget with some photo, in the other tabs there's a rectangular form with an image fill... I have to see the same layout that I see in my 22" monitor, in other smaller or bigger monitor (like 15") just like in the "collecdiv.com" website... The Dimension of my muse file is 960px width
Pleas help me

How to create a full page background image that is fluid?

I'm creating a website for my portfolio, and one of the things I wanted to have is a full page background image that the div tags are in. I know there is a way to put it in via page properties, but that doesn't allow you to add CSS styles and I want the image to re-size with window changes. This requires putting the image in a div tag, but then it pushes the other div tags (such as my header section and navigation) so that they aren't over the image like I want. Is there a way to push the image div tag to the back so that the other div tags go over it.
I'm using HTML5, and it will also be a responsive design, but the fluid background is only for desktops.
I don't go on the adobe website often, so if you have an answer to this, or need more information to figure it out please email me at [email protected] and you'll get a faster reply than on this forum.
Thank you everyone for your help.

You should set this forum to email you on a reply.
I don't have a link in your question to determine how you are trying to do this, but here's a technique I have used:
Take a look at this website and see if it doesn't have what you are trying to do. You'll see the flag in the background and I have used opacity in the layers on top of it to keep the flag somewhat visible.
Now, what the flag does not do is re-size itself with the viewport (the browser window). But the flag is in a div that sits on top of the body. My code is accessible, but you're looking for the flag div and it's defined in CSS thusly:
#flag {
          width: 100%;
          background-image: url("../images/polish-flag.png");
          background-repeat: no-repeat;
          min-height: 900px;
Now, CSS3 adds a new attribute you can apply to the background image thusly:
     background-size: 100% 100%;
That would make your background fill the viewport.
I chose to not do that, because I was worried about versions of Internet Exploder before 10.

Content in the page not displaying in full width

Hello everyone,
We have a EP 2004s SR1 Portal with customized framework page and display theme.
When logged on to the protal, the first page(say home page) was displaying by leaving some width at right of that page (approximately the width is equal to scroll bar width). For remaining pages this is not the case...it is displaying properly i.e displaying with full width covered.
and one more thing is, this is happending in Production and QA machines...For Development machine it is working fine.
Could any one help me in this...
Thanks in advance
Regards
Sunil Chiluveru

In your style.css on line 187 you have this. Remove the max-width.
.section > .content {
    background-image: url('../images/frame/contentBg.png');
    max-width: 800px;
    padding: 4%;
    text-align: justify;
    color: #646462;
    overflow: auto;
Nancy O.

Full legend in image slideshow full width

Hi Everyone,
I can't get a legend full width with a background color in the image full width ( Slideshow ) , could you help me please ?
Thanks
Message was edited by: zeek zeek

@iamDK,
Thanks for the response. I am familiar with Pinning and Slideshow Widgets and have been using Muse since it's inception, what I don't understand after watching one of the videos in which Terry White mentions FullScreen or Browser Width using the Slideshow widget and as Jason Bibby at the top also mentions, I have not had any success using any of the SS Widgets again to acheive this effect. Pinning the SS Widget to the top of the Browser does just that and does not stretch images within it to fill the Browser Width even if you get inside the widget to expand an image so that it snaps to the edge of the Browser still does not do it regardless of weather its pinned or not.
I've had to jump into DW to get this done - in combination to using Fluid Grid, which I had rather not but so far so good, at least its responsive and not having to create twice in the case of Muse. I love Muse for its simplicity, being able to whip up pretty much any design in no time is sweet, but having a SS that stretches Browser width is a common trend and I'd like to see it integrated into Muse and if it can be done now as the video shows then how?
If you know how to do this in Muse could you please show us how?
Kind regards,
Kelvin

Full bleed background images

I have full bleed background images. They load correctly (proportionally) and quickly in firefox. In internet explorer, they take a long time to load and they are scaled disproportionally. Once I change the size of the browser window, they adjust to the correct scale. Once a page has gone through this motion, it stays correct when revisiting the page. On another computer, also in IE , they load incorrectly at first and after a few seconds, adjust to the correct scale. What can I do make sure the images load correctly in all internet browsers?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

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]

Full width parallax menu scrolling

Hi all, did anyone of you have this problem that I am encountering? My site www.west-coast-equine.ie loads perfect but when using the anchor based menu the full width fill of the background pics shifts to the left. Would appreciate some input and thank you in advance

I believe the issue is resolved ? As i can check on my end and dont see the same behavior you have mentioned with full width images.
Thanks,
Sanjit

Full width background photo

Similar Messages

Maybe you are looking for