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

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

On the new ipod touch, is there a way to enlarge album art to fill the whole screen?

Hi there,
For Christmas I was given a new ipod touch (long story short my old one I put through the wash by mistake ) and this new one is great but when I listen to a song on the new itouch the album art does not fill the whole screen like my old itouch, this is a small detail I know but I loved that feature so much and I was hoping there was a setting I could activate/change which allows this on the new itouch.
At the moment on the new itouch the album art is small and centered towards the top of the screen while the function icons are below the image while on the last one the album art filled the whole screen and the function icons where over the picture at the bottom and didn't stand out as much as it does now.
I have drawn a very rough MSpaint diagram explaining what I mean lol.....
[i tried using the insert image feature but got a javascript error so using external site to upload pic]
http://s28.postimg.org/aovrsuewt/itouch_something_like_this.jpg
Anyway my question is, is there a way to have the album art fill the whole screen with the new itouch?

Just sync them to the iPod. See:
iTunes: Syncing photos
They will not go to the camera roll album but to a new album

When on the internet, how do I expand webpage to fill the whole screen?

When on the internet, how do I expand a webpage to fill the whole screen?

Perhaps Safari isn't quite what you require, too much work involved all the time making it easier to see
Take a look at my customized Firefox:
it always opens to the same size window (or full screen if you like)
it always zooms all web pages 160% (or whateve you like)
it always has large type on the menu bar area. (to whatever you like)
it's very highly customizable, (or use the plain default settings)
has more add-ons than anyone (a real plus when you need it)
has more themes and personas than anyone (make it YOUR browser)
Easier surfing option for hard of seeing users
Safari is about the absolute worst browser since Internet Explorer, it's because Apple has already got your money so there isn't any incentive for them to make a better browser.

How to fill the whole screen of my iMac with the photos included in an iDVD project. (iDVD v. 7.1.2)

How to fill the whole screen of my iMac with the photos I included in an iDVD project. (iDVD v. 7.1.2). I mean, during playing the burned dvd.
When I do "Enter Full Screen", the slide show fills the screen but the photo itself remains in the middle with a wide black border filling the rest.
Any cure for this ?

Hi
In iDVD Preferences - Turn off - TV-Safe area - and the Photos will fill the full area with just letterboxing or pillars as max.
Then "Save as a DiskImage" and test this and see if this plays better - before burning DVDs that's not as You want them.
Bengt W

Is there a way to let the movies fill the whole screen?

Hi guys,
I started to watch movies by renting or buying from itunes and I realized that some movies don't fill the whole screen. I wanted to know if there is a solution.

Ok. Thank you Roger. Actually that's not a big problem but I'm giving my money to movies instead of watching them free(In my country) on the internet. I just wanted to know if there's a solution. Unfortunately there isn't as you said. But some of the movies don't fill the whole screen.
Thank You

Making windows smaller after making it fill the whole screen

I have made an application fill the whole screen by clicking on the green button. Now how do I make it it smaller again? It's jus SOOO big on the screen I want a smaller window again.

Hi slowflyn,
You can return to normal view by moving your cursor to the top left corner of the screen and clicking the green button once more when it drops from the top of the screen.
OS X Yosemite: Take apps full screen
https://support.apple.com/kb/PH18744
All my best,
Allen

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

How do i get my image to fill the whole page in pages

I am making an epub book and would like the image on my cover page to fill the whol page without the large white borders around it. How can I do that in pages. I know you can't export a document as an epub if it has floating objects in it but i don;t know if thats a problem for this application or not. Thanks

Menu > File > Page Setup > create a custom paper size of 9" x 13.5" > set all margins to 0 > Format > Any Printer > OK
Create your custom cover as a jpeg and crop to 9" x 13.5" or proportional pixel equivalent.
Import your cover onto the first page of your ebook.
Inspector > Wrap > Object Placement > Inline...
Stretch cover image to fill the page.
Menu > File > Export > ePub > Use first page as book cover image
Haven't tried this myself, but this is what is recommended.
Peter

Web form doesn't fill the whole screen

I have forms (version 6i) running on the intranet. When I run these as client/server the forms fill the whole of the physical screen; but when in the brower, the forms leave a 2 inch border on the right hand side. I want the forms to occupy the whole of the browser window, but cannot seem to be able to do this. I've tried maximizing the MDI and the form windows etc etc, but still no luck. Anyone have any advice?
Many thanks in advance.
Harry
null

Hi,
When displaying forms in web,
the size of the form that is shown in browser is based on the height and width that you specified in you html file.
The html file in this case means the one that holds your forms java applets.
eg. width=800 height=600
View source the html file when you run the forms in web.(right click to view source from the 2 inches area) and check what's your height and width.
Hope this helps.

When the page opens it fills the whole screen and I cannot access anything else unless I go out of the current site. I cannot minimize it.

When I open a site, it fills the whole page and I cannot minimize it or get to another page simultaneously. The only option I currently have is to put the cursor in the upper left corner and only the tab for the current site is shown.

On Mac use Fn + F11 to toggle full screen mode
*https://support.mozilla.org/kb/how-to-use-full-screen
You can try to remove the Firefox plist file (org.mozilla.firefox.plist).
*http://www.macfixit.com/article.php?story=20060606082246983 How .plist files become corrupt and troubleshooting the results
Go to "~/Library/Preferences" and remove the plist file for Firefox (org.mozilla.firefox.plist)

Apple tv my tv programmes are not playing in widescreen even though rented movies are. Aditionally my photos on my iPhone 4 are also shown only in the middle of the screen? Why are not all films/programmes / photos filling the whole screen?

Just purchased Apple TV 2 & music videos purchased and films rented from iTunes play in 16:9 ratio and fill my 6 year old Samsung TV screen completely. However my photos and videos played by AirPlay play in the centre of the screen along with TV series purchased and played from iTunes. Why are not all played media filling the TV screen even though they are playing in 16:9 on the TV?

if the original material is not in widescreen appletv will not play it in widescreen
if it did it would mean that it had to cut off some of the image

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.

HT1338 How do I quit the new iTunes as it fills the whole screen now?

The new iTunes seems to fill my entire screen and not sure anymore how to exit from it other than a forced quit. Suggestins?

iTunes>Quit iTunes
To reduce the window size, look in the upper right corner you will see 2 symbols. The left symbol will turn the window into a mini player. The right symbol will decrease or increase the window size.

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.

Background image to fill the whole screen

Similar Messages

Maybe you are looking for