Hi folks, Background image pilling to the right?

Hi folks, I am attaching an image of what I am seeing on a webpage and
was wondering why the left side would also bleed to the right side of the screen instead of just keeping the non green color to the right end?
Pls see attached photo.

The background is repeating. If you don't want this to happen, when you define the background make sure you add the attribute "no-repeat" in your CSS code.
http://www.w3schools.com/css/pr_background-repeat.asp

Similar Messages

How to set a background image to fill the entire screen on any device in a spark mobile application

Hi,
I started developing a mobile application with Flex.
I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio, just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
Can you please tell me how can i achieve this?
Kind regards,
Dan

Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
C

How can I get the picture to show in Photoshop? The thumbnail image appears in the right side panel but the full image isn't showing at all.

How can I get the picture to show in Photoshop CS3? The thumbnail image appears in the right side panel but the full image isn't showing at all.

What specific information would you need? The program was working just fine early yesterday morning and than when I came back in the afternoon to edit some more pictures that is when I wasn't able to see the full image anymore. It is providing me with all of the editing options as if the picture is there but it is just a blank screen with the thumbnail pic showing in the right panel.

Image offset to the right

Why is the image offset to the right when I try to print in landscape mode? On a print the title block is mostly off the page to the right and it prints like this on both of my printers.

Okay, I figured out a fix. Here's the deal:
The Tablet PC Settings control panel has radio button options for Right-handed and Left-handed menu appearance - the menus are supposed to appear to the left if you're right handed, and vice-versa if you're left handed. I had changed the setting to match my right-handedness. The default setting was Left-handed.
Apparently, the CS4 Photoshop, InDesign and Illustrator interface isn't compliant with this handedness feature of the tablet UI. Acrobat Pro and Bridge work fine with handedness settings and I haven't checked the rest of the suite applications.
If someone running Vista with a Wacom tablet can check this out with the right-handed menu setting to confirm it's not just my system, I'd appreciate it.
BJ

How to repeat a background image to cover the height of the page?

Hi
I have a page with an image alinged to the top in a table and
I have a pattern in the background of the cell in the same table
I need that background of the cell to repeat it self along
the height of the page, so when someone views the page at a higher
resolution, the background image will repeat it self to cover the
extra space.
I've tried setting the height of the table to percentage, but
the table doesn't cover the height of the page.
I could also make the table really long so when viewed at
higher resolution there wont be any blank space at the bottom, but
this makes an unnecessary and long scroll when viewed at lower
resolution.
Someone told me to use css but i have now idea how to
implement that.

make sure you have set your page margins to 0 if you don't
want the default
margin top left. Cut and paste the following into the head of
your document
just before the closing </head> tag.
then if you want to repeat a background image in a cell, you
need to create
a rule to do this:
.cellback {
/*this repeats the image across the page horizontally*/
/* if you want to repeat down the page, then change to
repeat-y */
background: url(pics/whatever.gif) repeat-x;
you can combine this background image rule with the other
margin setting so
you have:
<style type="text/css">

</style>
You then apply to the class to your cell
<td clas="cellback">
Examples here:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/cellbackground.htm
this shows how to use a background image for your entire
page:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplehor.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
> I have a page with an image alinged to the top in a
table and I have a
> pattern
> in the background of the cell in the same table
> I need that background of the cell to repeat it self
along the height of
> the
> page, so when someone views the page at a higher
resolution, the
> background
> image will repeat it self to cover the extra space.

How do I fit a background image to fill the entire page?

Hi,
could anyone please tell me how I use e.g. a jpeg image as a background image that fits the entire page without getting horizontal or vertical scroll bars?
Thanks

Hi Pziecina and Nancy O.,
thank you so much for your mails. However, I'm still trying to figure this out.
@ Pziecina...I studied the source code of your webpage and tried to insert parts of it into my own page in different variations. The solution to my problem must have something to do with CSS and img src height and width. All I get is a white page. I found out that an image size set in Photoshop apparently doesn't have any effect on whether the image fills the browser 100% or not.
@ Nancy O. What I'm trying to do is to use one single image as background for a single page on the website, I'd like to construct. An image that opens up to the entire width of the screen...not just the browser. I imagine this with layers of transparent/solid color for text fields. I studied the website page, you suggested and a repeat action is not what I aim for. And I realize that maybe I'm thinking too much in Photoshop terms...thinking I can do similar actions in Dreamweaver. I'm well aware of the whole thing being 'too much' in terms of design and usability but if you check out www.frauhaus.dk I think that works beautifully, although it doesn't open up to the entire screen. I'd like to see if that design concept will work for my own website or if it's going to be too confusing.
And to both of you I really appreciate your time and input, thanks. Even though I'm still getting grey hairs as a beginner I keep thinking that there's got to be a solution to this.
Best regards from MissRaspberryDream

Background image to fill the whole screen

Hi everybody
Please assist,
1st question : I want to add the background image that fit the whole screen. I have tried to put image background however it leaves white spaces on the edges and another thing is that after adding the background image when I add content in the tables the background image start to repeat.
This is the website example I want to achieve : www.inesjaksic.com , www.grupa-desperado.com
www.street-heroes.com
2nd question : How to add the scroll bar on the text content, so when you scroll only the text moves.
Website example : http://www.kls.com/page.php?p=about/biography/index
Thank you in advance for your help.
Kind regards
Vusi

#1 Background images are static. They don't resize to fill the browser viewport without a lot of additional tricks which may or may not work in all browsers. Moreover images that resize quickly become distorted. For best all around results, build your page to a fixed-width target audience (990px is usually fine for most users). Use a seamless background tile or gradient slice and repeat it vertically (repeat-y), horizontally (repeat-x) or both ways (repeat).
#2 Use CSS overflow and height property.
#divName {
height: 400px;
overflow: scroll;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to get background image to fill the browser and remain fixed in both IE and Firefox?

Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
First of all, I'm using IE8 and the latest version of Firefox to test this.
I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

Expand the Background Image to Cover the Entire Region Title

I have a region title that contains an image and it has a height of 2 rows but the background image (blue image) is not expanding in the area (the css contains repeat for the background). The application uses theme 2. Can someone help?
CSS:
.rc-title {
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
div.rc-blue-top
    background: url("../images/bg-region-blue-l.gif") repeat scroll 0 0 transparent;
    float: left;
    width: 100%;
}I created the application on APEX.ORACLE.COM:
Workspace: RGWORK
User: TESTER
Password: test123
Application : CSRSR (33558)
Select Signage from the menu (only choice).
You will see that one of the tabular forms has Nameplates and an image, another tablular form has an image but no text (Nameplates) even though it is there. I would live the blue to cover both the image and the text.
Please help
DB: 10g
APEX 4.1
APEX 4.2 (APEX.ORACLE.COM) works the same way.
Robert
http://apexjscss.blogspot.com

sect55 wrote:
fac586 ,
I would like to try the second option:
>
Another option would be to eliminate the problem by moving the nameplate images out of the region titles. There's horizontal space within the regions that will allow these images to be positioned to the left of the tabular forms, which would look OK.
But how do I reference the horizontal space within the regions? I looked at the template for the region:
<div class="rounded-corner-region float-left-100pct" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="rc-blue-top"><div class="rc-blue-top-r">
<div class="rc-title">#TITLE#</div>
<div class="rc-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
</div></div>
<div class="rc-body"><div class="rc-body-r"><div class="rc-content-main">#BODY#<br />
</div></div></div>
<div class="rc-bottom"><div class="rc-bottom-r"></div></div>
</div>and couldn't find out to put the image in the horizontal space.
Can you please help me by providing the details? There are two options, depending on the role you see the nameplate images playing on the page. I've used the two regions to provide one example of each.
*1. Nameplate as eye-candy:* If there's sufficient information in the region title, region content and item labels to make the nameplate images superfluous in providing information to the user, and you're just using them to improve the appearance of the page, then they can be applied purely using CSS.
/* Nameplate image as CSS eye-candy */
#nameplates-ndc div[id$="catch"] {
min-height: 36px;
padding-left: 113px;
background: transparent url(#WORKSPACE_IMAGES#nameplate_ndc.gif) top left no-repeat;
background-size: 103px;
}Note the use of the CSS3 <tt>background-size</tt> property to resize the image. If the app has to run in browsers that don't support this then you'll have to drop it and create an image of the exact size required for use in the <tt>background</tt> rule.
*2. Nameplate as content:* If the nameplate images are necessary to provide information to the user, then they have to be included in the region (and they must have an <tt>alt</tt> attribute providing an alternative representation of the information contained in the image).
Put the image in the region Header:
<img src="#APP_IMAGES#nameplate_n.gif" width="103" alt="Nameplate (name only)" />and float it so it sits alongside the form:
/* Nameplate image as page content */
#nameplates-name .rc-content-main img {
float: left;
margin-right: 10px;
}

Sharing Indesign on CC show low-resolution images and not the right font in preview

Dear Adobe,
I really want to make use of CC Files and the sharing ability with my clients. I have shared an Indesign file, whereas all the links in that indesign file are on CC Files too. The font is a regular Futura Std. But both the links in the files (background and logo) and the font used are not showing up correctly. I deleted the file and uploaded it again, but it is still showing a bad preview. This is not something I can share with my clients.
Am I doing something wrong? It appears that another Illustrator file is showing its preview in low-resolution and after 2 seconden it renders it at a higher resolution.
Regards,
Daniel

Fonts may not and links will not show up correctly in the image preview on the Files page. The preview being created on the server is not able to access the links, and only the default fonts are available.
You can export a PDF and share this with your clients (and you can always include a link to the InDesign files if the clients need to download them).

When viewing some websites my desktop background image shows as the page background...why...and how do I fix this?

It seems that the current version of Firefox does not understand how to process style sheets. Instead of the stylesheet background color or image, I am now seeing my PC's desktop background image. This does not happen with IE or Chrome. When checking the error console, I get "Warning: Unknown property 'zoom'. Declaration dropped. Source File: http://trustserve.net/themes/ModernBlue/templates_cached/EN/global.css Line: 4"
I am not trying to zoom.
Any ideas on how to fix this. I can't use Firefox with these problems and I really liked it prior to these problems.

I thought I had it disabled. I enabled aero and then disabled to be sure, and still have the problem, but that was a very good idea. Thanks.
The problem started shortly after I installed two new programs, a graphics program, and an anti-virus. I just removed both programs and restarted the computer and that seems to have solved the problem. Your idea about Aero gave me the idea that one, or both of these programs changed some of my system settings. I am now going to install them, one at a time, and see if the transparency problem returns. I'll post my findings.

How to place a background image, so that the text layer, without having to use a text box

Hello,
I have a problem with the placement of the background image. When I normally formatted text on a page and add the image you want on the background of the text and the handle on the back is still image over text, just no longer responds to wrap text.
The second problem is adding a new page to the document. I have unfinished document and I need to add a page before the current ... how?
This is a new Pages.
Thanks for the advice

Helps to know exactly what version of Pages you are using.
I assume Pages 5.1. But the last post makes me wonder.
Text Wrap only works on text under an object. Either it is in front causing text wrap or it is in the background with none. It is unclear what you are trying to achieve.
Click at the very beginning of your text:
Insert > Section Break/Page Break
Peter

Changing a background image according to the time of day/night...

Hello all:
I have a client who wants me to put in 2 different background image for an upcoming project, (one for morning, one for night) and I'm wondering if anyone can tell me how to swap background images depending on what time of the day it is. The other problem is that it has to be through the Flash Designers mode and not the back-end. (if that's even possible)
The reason being is that I have NO experience with ActionScript 3.0, (I'm only have experience with Dreamweaver, HTML, CSS etc.) so I am a complete and utter newbie in the world of Flash and ActionScript.
If anyone could help me with this problem, it would be greatly appreciated.
Thanks.
Justin.

I am not sure what you are trying to differentiate between when you say "Flash Designers mode and not the back-end", or what background image you are talking about... but in any case, Flash has the Date class with a getHours() methiod (like javascript) that you can use to tell what hour of the day it is (0 thru 23) which is probably all you'd need to determine when to show which picture. If the images are in a Flash file, then you can just create a movieclip that has the images in different frames and use the getHours method to decide which frame of that movieclip to be in.

Just 1 Background image to fill the browser & NOT tiled images

After reading some of the suggestions given in this forum, I gather that I have to use CSS to get around this problem. What I did was:
in a Notepad text editor, typed & saved as mystyle.css
body
background-image:url('gradient-3-max.jpg');
background-repeat:no-repeat;
(*note: fr the CSS tutorial > How to > external style sheet. I may not have understood it completely.
Reads: ...... Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:)
<head>
<link rel="stylesheet" type="text/css" href="mystyle" />
</head>
I added this tag in my HTML document, however, the background is still tiled.
Where did I go wrong? I am a newbie to flash, so kindly guide me thru each step
Thank you!
Karen

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

[iphone] why is my image crammed to the right side? (link to screenshot)

http://www.grabup.com/uploads/317649946e1d34d135878d1b9cea9175.png
here's the code that hooks up the right hand header button:
UIImage* refreshImage = [UIImage imageNamed:@"refresh.PNG"];
UIButton* refreshViewButton = [UIButton buttonWithType:UIButtonTypeCustom];
[refreshViewButton setImage:(UIImage *)refreshImage forState:UIControlStateNormal];
[refreshViewButton addTarget:self action:@selector(refreshViewAction:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc] initWithCustomView:refreshViewButton];
self.navigationItem.rightBarButtonItem = refreshButton;

Scratch that idea (if you read the original).
Try this instead of creating a button then a BarButtonItem with that button:
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc] initWithImage:refreshImage ...other params...];
You also need to release refreshButton after you use an alloc method.
Message was edited by: SexyAndOhSoWitty

Hi folks, Background image pilling to the right?

Similar Messages

Maybe you are looking for