Background image full screen

Note: Looking to make a complete a background image for Web site...

I tried my best to follow a step by step YouTube video (Background Image CSS3 - Dreawmeaver CS6 Tutorial - YouTube fullscreen) but it stops working at 03:40, because the CSS rule book does exactly the same thing. I have tried my best to understand how some words/phrases may have changed for hours but kept getting blocked for example has not been able to find a way 'to create a new css rule' by setting standards for the jpeg file to be used as the background pic.

So, if someone wants to check the video out and understand how the directories have changed in that the amendment of evolution "css rules" (especially of downloaded jpegs would be great and I want to thank is ' a ton.) Nothing against the narrator of the referenced video here... it's just that there have been updates and his video is a bit outdated, I guess.

Do you think that your BG image is sort of MASSIVE for use on the web?

2, 025px × 1, 471px

Why use a massive image when a smaller will do the same thing?

If you want to support older browsers (and you should) add the vendor prefixes.

As I said in my first answer, that is the code.  I use shorthand CSS because it takes less space. I also add the default background color just in case users have images turned off or if the image fails to load correctly.  You can change the color of what you want.

{body

Background: #000 url(Images/care-and-counseling2.jpg) no repeat fixed Center;

/ * for Safari, Chrome * /.

-webkit-background-size: cover;

/ * for Firefox * /.

-moz-background-size: cover;

/ * for Opera * /.

-o-background-size: cover;

/ * for all other browsers * /.

background-size: cover;

}

Good luck with your project!

Tags: Dreamweaver

Similar Questions

  • Creating a background Image full screen

    Hi guys, I created a background image of the browser by 1920p wide by 1600 p deep.  When I place it in my master page, the original size and select high in the Center, the image is placed in an area that covers the left side of the screen of the browser anywhere on the right side of my page 960p border.  The remaining right side of the browser area is empty, as my image is not wide enough.  Have did something wrong or there at - it a setting I have to do something with the settings?  My page size of work area is the default 960 x 500 p p.  Thank you.

    Set your "suitable" to "Scale up" If you want your picture to imitate the size of your browser.

    Also set your 'Position' to the PIN in the Center.

  • Make a background Image full screen

    Hello

    I took presentation in flash publish as .exe

    The document size is 1024 x 768

    I use this code for full screen

    fscommand ("fullscreen", "true");

    but my background img size 1024 x 500.

    so when I publish the movie, box up and down is the document background color fill color

    I want the background by bg img fill

    How can I do this?

    Help, please!

    Thank you

    Mandar

    use:

    Stage.scaleMode = "noBorder";

  • I can't change my background image to screen.

    I can't change my background image to screen.

    I followed the process of selection of a desktop image and confirming the image I want to save but the program won't save selection and return to another block background color

    Original title: Customizing Office

    I just right-click on an image that I want as my wallpaper (called "wallpaper". Google for lots of choice) and click set as wallpaper.

    Or see the Microsoft way to do (slow) HERE.

  • The page master, menu and images... why the menu disappear when adding an image full screen?

    Hi all

    I use the widget Menu Muse on the single page Master on the site, but disappears from menu to a page where I placed an image "full screen".  Is there a 'picture-holder' that I could use and still have Visual and using the menu? (hope that makes sense).

    Go to your master page open the "Layers" Panel, create a new layer above all others and drag the entries in the layer of everything on that menu. This works, because the layers are not confined to a single page (master), but work across the site.

  • Sensitive images full screen & Placement of content

    Hello

    Please can I ask the community for help and advice?

    I created a Web of Muse site and used a widget from QooQee called REACT that allows me to place a sensitive image on the first page of my site and meets all the screen resolutions, which is great.  The image fills all browser.  I want the whole image to fill the first page of my site with a page scrolling.

    However, I have a problem and it is the content below my picture to full size browser.

    I'm designing on an iMac 27 "screen and when I preview the design in a browser on the big screen, everything is online and is placed where it should be.  However, when I discovered that a 13 "or 15" Macbook, content drops creating a gap between the bottom of the image full screen and the beginning of the content.

    Anyone know of a way I can continue this drawing, but have the content of the answer, so he's always sitting right under my picture full screen and I have no gap between the image and my content.  I need this to work for 13 ", 15" MacBook and iMac.

    Any help would be appreciated gratefully.

    Link to the test site is Billy Kenny Music | Official website of Billy Kenny

    Thank you very much

    RG.

    Reactive Adobe Muse CC 2015 is now online. Please install the update of CC > Apps.

    What's new: news summary

    Release notes: https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

    Delicate design:

    Adobe help Muse | Create responsive Web sites

    Adobe help Muse | Responsive web design in Adobe Muse

    Adobe help Muse | Migrate existing Adobe Muse Web sites to answer

    Tutorials

    To get started with Adobe Muse (replaces how to make a website with Adobe Muse (coffee of Katie)):

    - https://helpx.adobe.com/muse/how-to/create-responsive-website.html

    Create a sensitive webpage with Adobe Muse:

    - https://helpx.adobe.com/muse/how-to/responsive-web-design.html (more detailed features RWD of Muse demo)

    Thank you

    Sanjit

  • How can I make an image full screen on a Web site a page

    I'm making a site page with 5 elements. I want with each element a (sensitive) image full screen. I can do it in Adobe muse?

    Reactive Adobe Muse CC 2015 is now online. Please install the update of CC > Apps.

    What's new: news summary

    Release notes: https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

    Delicate design:

    Adobe help Muse | Create responsive Web sites

    Adobe help Muse | Responsive web design in Adobe Muse

    Adobe help Muse | Migrate existing Adobe Muse Web sites to answer

    Tutorials

    To get started with Adobe Muse (replaces how to make a website with Adobe Muse (coffee of Katie)):

    - https://helpx.adobe.com/muse/how-to/create-responsive-website.html

    Create a sensitive webpage with Adobe Muse:

    - https://helpx.adobe.com/muse/how-to/responsive-web-design.html (more detailed features RWD of Muse demo)

    Thank you

    Sanjit

  • Images full screen / DIV / etc

    It is easy to set the width to full screen, but is it possible to adjust the height to full screen too?

    I want to be able to start the page with an image full screen (without mather the width or height of the screen of visitors). And from there, the visitor should be able to scroll through the content

    example: https://www.Rijksmuseum.nl/NL/collectie/BK-2008-4

    You can't do that with pure CSS - using percentage height of an element works only if the parent has an explicit width.

    On this page of the rijksmuseum, they use javascript to enlarge the image to match the size of the screen.

    VIC

  • sensitive presentation of background video full screen

    Hi guyss


    in the old version, you can create a version of office with the video full screen background and other tablet or mobile with a background image. In the sensitive version I don't know how to change the video to an image automatically when it reaches the breakpoints defined for tablet or mobile.

    This is one of the caveats of sensitive design. There may be a few replacement widget that can deal with this by assessing the size of the browser window, but otherwise, I'm not aware of a way to do in Muse. The survey would have to happen inside the widget itself before actually loading the video to not spoil the bandwidth, which Muse cannot currently because it is based on the size of the overall page.

    Mylenium

  • My theme is only show at the top of the screen. I hope for an image full screen. Can help you.

    Hello friends, I was hoping that the theme I've selected would fill the full screen. Is it possible to do so. Thank you

    Do you mean that you'd have your picture full screen on every web page? Or only on tabs/windows empty (when you open a new tab for example)?

    In the second case, consider using an add-on like Browser Backgrounds.

  • Is it possible to display an image full screen; in other words, how to switch all the toolbars - including the status bar and the task bar?

    I found a few larger images (986 x 1024 and 2420 x 2514) I'd like to see on the entire screen. Is there a way to do this by enabling / disabling (then restore it later) of all toolbars - including the status bar and the task bar? Or is there an FF extension that will make perhaps even easier?

    Press F11 or select "full screen" in the menu. (If there is still floating toolbars around after that, do a right-click on the toolbar and remove the checkbox.)

  • Transparent GIF as background image to screen

    With Windows XP, we could use a GIF with transparent background as wallpaper (desktop background image), which then allowed the screen background color show through and around the image.

    Attempt to use this image as a background image of Windows 7 the transparent background of the watch just screen image as white.

    Is it possible that Windows 7 supports images with transparent backgrounds for desktop screen/image background?

    Hello toyNN,

    Thank you for visiting the Microsoft answers community.

    Windows 7 convert background in .jpeg images, unfortunately with a transparent background is not possible.

    Hope this helps Chris.H
    Microsoft Answers Support Engineer
    Visit our Microsoft answers feedback Forum and let us know what you think.

  • image full screen with multiple triggers of reversal - help

    Hi all

    Im having problems here, Im working on an item you can see here http://10.0.10.92:33334/Preview/website-12/index.html

    The question is, I want the image that shows when you hover over the text to be full screen, and I need that to happen by flipping the trigger.

    I have now works fine, but the images are not full-screen. I can do a slide show widget fullscreen, but I can not activate the images through reversal, one click only, which is not what I want.

    I tried to use the ToolTip widget and many other widgets from slide show and composition, my problems are that slideshows cannot be activated via the hover, and the compositions cannot be full screen.

    How to achieve this?

    Any advice would be wonderful!

    You can always modify underlying events of scripts for use of onMouseover() rather than onClick() after you published pages. The same would be true if you have used the CSS rollovers. Otherwise I can't think much. They are simply limits to use a widget in cans like Muse system only.

    Mylenium

  • Widget background video full screen

    Hello! Does anyone know how to get the video background full screen to fit the size of the browser. Whenever I do my smaller browser window, the video backgrounds stays the same size and gets clipped by the browser. The content in front of my background fits to the size of the browser, but not the video backgrounds. Any advice? Thank you!

    Found some links that might help you

    Responsive HTML5/CSS3 video historical in div No. necessary Javascript

    http://slicejack.com/creating-a-fullscreen-HTML5-video-background-with-CSS/

  • View image full screen is slow?

    Hello!

    I have an Intel Core i7 active and 4 hearts, 3.6 GHz Hyperthreading. Also, I have 24 GB of RAM. My screen has a display resolution of 2560 x 1400 pixels. I have configured Lightroom 5 to have a standard preview of 2880 pixel size. When importing let Lightroom generate all seen in standard size.

    Then a few days later I wanted to review my photo mode full-screen. At first, I saw just a fuzzy image, after 2-3 seconds, it is a little sharper, and after 2 seconds, it's sharp. So I have to wait 4-5 seconds per picture, I can see a sharp image.

    Any suggestions, what could cause this problem? Is this normal?

    Best regards

    It seems to result from this missing feature: http://forums.adobe.com/message/5703635#5703635

    If you modify an image, you must apply the regeneration of preview manually: http://forums.adobe.com/message/5704708#5704708

    And as the treatment is always serialized, it take more time, as it should be: http://forums.adobe.com/message/5703378#5703378

    Even the old style, not so optimized for the workflows of tools Bridge does a better job here.

    @Adobe: Sorry guys, but I'm a little disappointed

Maybe you are looking for