Background Image Cuts Off - Browser Scroll Isn't Long Enough

Okay, fairly new to Dreamweaver, long-time graphic designer. That said, the answer will probably be easier than trying to explain the problem!
Using the Page Properties, I set the following in the Appearance (CSS) tab:
Background color to #000
Appearance HTML Background image (contains the image in question, created in Photoshop)
No-repeat
This Photoshop image is kind of long (960 x 2232) because there is a bunch of text that needs to flow on top. I thought that I reached some sort of maximum in height and so I reduced the height of the image a little and the same problem--cut off at the bottom of the browser. Note that this cut off issue was not a problem until I extended the graphic to this long length. On other pages, it is much shorter and all is well.
I've pasted a snapshot of the bottom of the web browser preview below. You can see that the scroll bar is at the bottom and there is just a small bit of the paper that is not showing. I would like the bottom of the paper to be seen with a little bit of the black background beneath that.
My first instinct is that I'm missing a bottom padding effect, but can't find where to adjust that type of setting.
Another Thought--I would much rather this graphic auto expand as the text flows over it, but did not know how to accomplish that, so I extended the graphic in the Photoshop file. Its not a tile type of image that can be repeated. It is an ancient looking paper, therefore, the top and bottom need to look a certain way, but the mid section could be tiled and repeated. So if this is a better route, please direct me on where to learn how to implement.
Thanks a bunch!

extra carriage returns were needed in the text frame to extend below the background image.
Rule #1 in web design:
Do not use non-breaking spaces, line breaks or empty <p> tags as a layout device. It doesn't work in all devices or by all users.
Rule #2 in web design: Use CSS to style your layout with margins, padding and min-height properties.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Long background image cut off

Hi,
I have a long web page giving people and there bio. I set iWeb to produce a gradient gray background. The text runs about 3400 px long but the background cuts off at about 3000pxs. It looks fine in iWeb but is cut off on the published web page. I tried to edit the code and make changes in iWeb but without success. Any suggestions?

Welcome to the Apple Discussions. Have you tried setting the content height to what you need with the Inspector/Page/Layout pane?
This test page was set to 3500 pixels and the counter was dragged down to the bottom and a little more: http://web.me.com/toad.hall/HelperSite/Misc.html.
OT

Browser fill image cuts off at bottom when published from Muse to BC...?

The site previews fine in the browser but when I publish it to BC it cuts off the bottom of the image and just shows the browser fill color (which is dark grey). I'm pretty sure this is a BC issue because everything looks fine in Muse. I have done all I can think of to fix this but havn't figured anything out. Here is some information if it helps. Weird thing is only the img. I used for the header is listed in the css, the img. for the browser fill is not listed.
http://grasslandoregon01.businesscatalyst.com/index.html
Master Page css:
#u7524
          border-style: none;
          border-color: transparent;
          position: relative;
          background: transparent url("/images/header_swoosh.png") no-repeat center center;
          background-size: cover !important;
#u7524_align_to_page,#u7579
          position: relative;
#u32679
          border-style: none;
          border-color: transparent;
          background-color: transparent;
          color: #FFFFFF;
          position: relative;

Hello,
You probably did not find this article at the right time but there is one KB article explaining how to insert the Edge content into a Muse website.
Basically what you have to do is, after you publish the Edge project, to take the exported folder, or just the files, (but I'm totally into taking taking the whole folder) and upload them to your FTP where the Muse site is published. After that just use the "Object > Insert HTML..." option from Muse and paste the <iframe> code from the KB and customize the path to the folder where the files are located and the width & height for the iframe.
KB can be accessed here: http://www.adobekb.com/inserting_edge_content.html
An example can be found here.
- Edge project uploaded to FTP.
- Content of the project folder.
- HTML code
I hope this will answer your question.
Cheers,
Cristian

Webpage cuts off, no scroll bar.

Hey,
I'm a beginner so please take it easy on me.
I'm trying to create a website for my wife. Everything is completed and it looks great. The only problem I'm having is that when my wife goes to view the websit on her computer (much smaller size). The page cuts off and there's no scroll bar feature which I thought was like a fixture on websites. I've been looking for hours on how to add a scroll bar to my entire website .. like the standard browser scroll bar but I can't seem to find it anywhere.
Can someone here please help, I'd be much obliged. I have two files, one is the index.fla file which i used to create my page in using Flash CS5 and the other is the index.html file which I can edit in Dreamweaver.
Thank you kindly.
Sincerely,
Ali
feel free to contact me directly at [email protected]

Hi
I just wondered if this was resolved. I am having exactly the same problem with the same template. I have tried every combination of settings in the publish settings but cannot get the scroll bars.
The only way I have got to get it to work in any fashion has been to publish the page then rename the flash page created (index.swf) to flashmo_188_chrome_black and copy it to a fresh directory conatining an unedited version of the template. This does not really resolve the problem. It seems that the html file I create after editing the template is different to the file that comes with the template.
Any help or thoughts greatly appreciated

The bottom of my .swf image cuts off in firefox and IE, could anyone help?

Hello,
I've put a .swf image into iweb using the HTML widget. It's supposed to be animated except for in iphone and ipad in which case it will remain static.
I have two problems, firstly, whilst it works fine in safari and chrome, the bottom is cut off in IE and firefox. Secondly, I don't seem to be able to position it quite correctly in terms of vertical alignment on the page or its size. The problem is shown on the home page of the site: www.n2mediation.com (The other pages as yet have a static image).
I realise that this is a known problem. It's my first attempt at iweb and I've never seen HTML in my life before so if anyone could advise in simple terms which elements of the code to change I'd really appreciate the help.
Thank you
Trix44

Oh, thank you, I'm sorry, I hadn't understood what to do.
Everything about the animated image is now fixed brilliantly - the size, the alignment, and the bottom isn't cut off. Thank you.
The only thing I don't know what to do about now is how to have the static image load on ipad and iphone (because I understand that .swf files don't work on these devices). Currently the image doesn't load at all, it's blank space. Could you please advise how I should adapt the code to insert the static image if the device isn't flash compatible. The path of the static image is http://www.n2mediation.com/Fotolia_43355604_XL.jpg
Thank you
trix44

Image cut off at edge

I have inserted a logo with a registered trademark symbol in
the upper right corner and the right side of the circle on the
circle R symbol is cut off. The logo was created in Illustrator CS
and exported as a PNG file.

Please re-read my first reply. I said, "Link please". The
code you posted is
of no help because, guess what?, until we can see the image
in question we
can't tell what is going wrong.
Walt
"oldbologna" <[email protected]> wrote in
message
news:[email protected]...
> Thanks Walt.And ... the question is: how do I make the
rest of the circle
> R
> appear on the page? The whole page is now attached.
>
> <!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=iso-8859-1" />
> <title>Home Page</title>
> <meta name="description" content="Official home for
Misticks Home
> Fragrance
> Products, Reed Diffusers, Incense, Sachet Sticks, Soap,
Fragrance Mist,
> Room
> Perfume, Incense Cones, Incense Burners, Cone Incense
Burners," />
> <meta name="keywords" content="Misticks incense
sticks, reed diffusers,
> sachet
> sticks, room perfume, lamphuggers, soap, fragrance mist,
sachet scent,
> jazzberries, indian summer, delicious vanilla, vorange,
lavender rosemary,
> sandalwood, nag champa, ginger sutra, ecoscenter,
incense burners, " />
> <link href="misticks.css" rel="stylesheet"
type="text/css" />
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div class="logo" id="logo">
> <div align="center"><img src="logo Misticks RGB
10.png" alt="logo"
> name="logoMisticks" width="360" height="69" vspace="30"
align="middle"
> id="logoMisticks" longdesc="logo Misticks RGB.ai"
/></div>
> </div>
> <div class="productsNav" id="prodNav">
> <p>Fragrance Mist<br />
> Incense Sticks
> <br />
> Reed Diffusers<br />
> Room Perfume
> <br />
> Sachet Sticks<br />
> Sachet Scent <br />
> Soap<br />
> <br />
> </p>
> </div>
> <div class="horizNav" id="Layer6">wholesale buyers
</div>
> <div class="horizNav" id="Layer7">about us
</div>
> <div class="horizNav" id="Layer8">contact us
</div>
> <div class="horizNav" id="Layer9">find a store
near you </div>
> <div id="Layer10"><img
src="photo-RA-collection.gif" alt="rainforest
> collection" width="400" height="400" /></div>
> <span class="productsNav"><br />
> </span>
> </body>
> </html>
>

Background image causes horizontal browser scrollbar

We have a large background image on a website so that people can change the size of their browser window amd still see the background image. The image is also part of the page design so we can't use any of the scale options. All page content is centred and there are no objects other than the background image anywhere outside the 940 pixel wide centre column.
The problem is that the background image is causing the horizontal scroll bar to appear at the bottom of the browser, which is undesirable. Worse is that the scroll bar is not centred, it is instead all the way to the left. Can this behaviour be fixed in the next update please?

Figured out what was causing it (the footer, d'uh!). Any ideas on how to fix the footer up so it doesn't do that? The footer has an image the same width as the page background.

How do they get background image to span browser width?

At http://www.archerschoicemedia.com, they have a background image at the top that spans the entire browser width. How is that achieved? What if image isn't as wide as screen resolution, won't it just repeat?
All help with adding a background image that does this - spans the entire browser width - is what I'm after.
Thanks!

What if image isn't as wide as screen resolution, won't it just repeat?
No.
The CSS reads
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
        background:url(../i/backgroundvid.jpg);
        background-position:center top;
        background-repeat:no-repeat;
        background-color:#000000;
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 */
overflow-x: hidden;
overflow-y: auto;
So, the CSS is set to horizontally center the background image and not repeat it.
Plus, on screens wider than 1689px wide, the background color of black (#000000) shows through at the edges creating the impression that the background is endless.

Image Cut Off - Q150 connected to a PAN 720p Plasma via HDMI

Good Morning Everyone!
I have the same basic problem described on posting:
Q150 connected to TV - bottom of windows task bar is cut off
http://forums.lenovo.com/t5/IdeaCentre-Desktops-Home-Servers/Q150-connected-to-TV-bottom-of-windows-...
I have the Lenovo Q150 connected to a Panasonic 50" 720p Plasma via HDMI. The image displayed from the PC Windows 7 desktop is cut off at the bottom. Any ideas on what the setting needs to be for the Q150? The Plasma TV?
Thank you,
Edwin

I had the same problem on a Sony 46" LCD and just kept fiddling with the settings until I got the task bar to show up. I don't remember having to change any settings on the TV itself. I was able to fix it using the the Q150's video settings.
English Community Deutsche Community Comunidad en Español Русскоязычное Сообщество
Jane
2015 X1 Carbon, ThinkPad Slate, T410s, X301, X200 Tablet, T60p, HP TouchPad, iPad Air 2, iPhone 5S, IdeaTab A2107A, Yoga Tablet, Yoga 3 Pro
I am not a Lenovo Employee.
I AM one of those crazy ThinkPad zealots!
If you find a post helpful and it answers your question, please mark it as an "Accepted Solution"!

Image cut off when printing from snipping tool

I am using the snipping tool that is part of Microsoft Windows 7. Thank you for your help.

Hey , Welcome to the HP forums! I understand that you are experiencing issues with cut off images on your Windows 7 PC before printing to your Envy 7640. I can help you with that, however I am not quite sure what program you are using that has your snipping tool. If you let me know what program you are using I can make sure we get you pointed in the right direction to resolve this.

Top of image cut off when printed

I used Aperture to print a borderless 4x6 on borderless paper. In the print preview, the entire image was there (a close-up of Detroit Tiger Verlander with his hat on). Then I printed and the top 10-20% of his hat was cut off.
But then I ordered an online print through Aperture of the same photo just as I set up to print from my printer. The print was sent to me without being clipped at the top.
Anyone know why this clipping happens when I print the picture? I quadruple checked all the settings.

You may want to check on the printer driver and paper size selected

Problem with Airplay Mirroring: Image Cut Off

I have a mid 2011 Macbook Pro.   I have installed Mountain Lion.   I am able to activate Airplay Mirroring, however, part of the image is cut off.   In other words, what is shown on my TV is only about 2/3 of the image that is shown on my macbook.    It is not showing a black bar, or anything like that.   It is more like the image is enlarged and doesn't fit on the TV screen.
I have searched the internet trying to find a solution.   I haven't found anyone with this problem.   So, my question is, do I have some settings wrong?   Or is it a problem with the settings on my TV?   If anyone has suggestions for troubleshooting this problem I would be grateful!   I really want to use airplay!
Thanks!

OK, I am replying to my own question!    My husband just found a thread solving this problem.
https://discussions.apple.com/message/19070883#19070883#19070883
We changed the video settings on the Apple TV to 'auto', and restarted.   It works great now!

Background images which change with scrolling, just how is it done?

These fabulous sites, were featured on Adobe Muse's Site of the Day
http://www.streetreach.org/
http://www.lauranet.nl/
Brilliant sites. What they have in common is a background image (of sorts) that changes with scrolling, I just cant get my brain around how it's done?
Can anyone point me in the right direction?
Thanks

Start with some of these:
http://tv.adobe.com/watch/muse-feature-tour/adobe-muse-parallax-scrolling-may-2013/
www.youtube.com/watch?v=5OOLEztI-so
www.youtube.com/watch?v=8m2Lg241e3A
www.youtube.com/watch?v=gZI_K1TXqOM
I got these (and MANY more) by Googling, "Muse Parallax Scrolling"
Good luck.

Images Cut off in Premier Elements project

When I import a slide show into a Premier Elements project the images are cut off with only the bottom half of the images appearing. Can anyone give me some guidance on this issue?

johner3
Are you importing the slideshow as a wmv file rather than using the Edit with Premiere Elements Editor Output option in the Photoshop Elements Slideshow Editor?
Lots of information needed but I may have the answer in spite of all the questions.
What version of Premiere Elements are you using and on what computer operating system is it running?
Is your slideshow coming from Photoshop Elements Slideshow Editor? If so, how are you outputting it
a. Save to File Movie (wmv)
b. Burn to Disc
c. Edit with Premiere Elements Editor
There has been an epidemic of 1/2 wmv displays associated with a recent Windows Update kb. This may be at the core of your issue. Please see the Announcement at the top of this forum. For your convenience, it should look like:
Announcement: Windows Update Causes Display to Be Blacked Out
Hide Details
MicroSoft has issued an Update for Windows, that is causing problems with Displays. The following is from Talbot McInnis, who tracked down this problem, and offers a fix:
"MS bulliten MS13-057. Specifically, on XP kb2834904 and on windows 7 kb2803821 is causing a problem
For us, it occurs when decoding WMV9 files. Not all uses of WMV decoding are affected, but I confirmed that when connecting the WMV decode DLL to a sample grabber for RGB32 video, the frames arrive black on top, so that points directly to decoding internals of the WMV Decode dll.
You can uninstall these windows updates to resolve your problem."
There are several threads on the problem that this Update is causing on the PrE and PrPro Forums, so one can get more details. So far, there is not another fix from either MS, or Adobe.
Also, see this Adobe KB Article: http://helpx.adobe.com/premiere-pro/kb/wmv-files-corrupted-import-or.h tml
by Bill Hunt (Jul 12, 2013)
Please check out the Announcement details and delete the appropriate Windows Update kb if this applies to you.
There have been many, many threads on the topic, all with helpful advice which includes
a. for now, have the Windows Updates require your notification and approval for any downloading and installing of Windows Updates
and
b. if you catch the offending Windows Update kb in the Windows Updates Important Updates, right click it and select Hide. That is supposed to keep it away.
Please view and then let us know the outcome.
Thanks.
ATR

Dynamic TextArea cut-off when scrolling

I have a fixed size for the text area, and using html
formating.
The top CSS will not format the margin or padding.
Also the last paragraph of text gets cut=off half way through
it.
I thought I saw something in the doc but I can't find it now.
Anybody had this problem?

With html = true:
Padding on top and the bottom does not seem to work but on
the sides it does work.
The cut-off text was due to using the & symbol in html
tagged as &
The cause the text to end. Simply removed it and used "and"
then it worked.
The space for the first row needs white space so inside the
html tag just line feed
down one and all looks fine.
How this helps someone else.

Background Image Cuts Off - Browser Scroll Isn't Long Enough

Similar Messages

Maybe you are looking for