19440

Setting background image for body element in xhtml (for different monitors and resolutions)

I am so confused about background image in body element.

What is the best way for setting a background image for the body element in xhtml (for different monitors and resolutions)?

I mean, when you design a background (for example 1024*768) and put it in the body element with background rule, so we have some problems in different resolution or on another monitor (so wider than designed).

How can I solve this issue without changing my picture with Photoshop?

Shall we do something with JavaScript or jQuery?

Answer1:

I think you want to resize your background so it stretches and and always shows fullscreen. If that is the case, you can use supersize: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

Hope this helps you

Answer2:

The most common practice is to design a larger image, considering that the most relevant area is the 1024 wide center area, and the rest is just to fill the page when the user is using larger resolutions. As Marcel Korpel wrote, use the background-position property in css to apply align center.

Answer3:

It sounds like you need to not only use css to place the background-image, but also then to size the containing div to match your expectations.

body { background: url(path/to/image) no-repeat center center; width: 1024px; height: 768px; }

Answer4:

Up to version 3.1 in css you can use the calc function. With this you could calculate the "correct" filename of the background image fitting the individual monitor size and resolution.

Recommend

  • iterate through nested form elements in jquery
  • Convert a JSON into CSV using jq
  • Loop through json using jq to get multiple value
  • Recursive extraction of object values and parent key name using jq
  • Build a JSON string with Bash variables
  • How to set Safari print margins via CSS to print borderless
  • Simple Djanqo Query generating confusing Queryset results
  • jQuery Drag and Follow Mouse
  • Absolute GradientStops in LinearGradientBrushes
  • How to center this rotating image (CSS animation)
  • Dynamically loading a script changes its behaviour
  • How can I replace a null value in a json document by a specific value with jq?
  • JQuery autocomplete return a checkbox checked
  • How to disable or configure clipping when rendering to texture using FBO in OpenGL?
  • Duplicate output looping through multiple values in while loop bash
  • how convert RGB or CMYK color to percentage CMYK - javascript
  • Java - Multi-colored text
  • Why doesn't a fixed-width element take up the space beside a floated element?
  • Call knockout viewmodel function in jQuery
  • Parsing Complex JSON file with JQ Issue
  • Restrict mouse movement over a specified window handle
  • Youtube Video Player Fullscreen click event
  • Small video playback
  • write text on image and show it to a imageview
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • How to change placeholder text in an autocomplete activity of android google place?
  • react split panel resize
  • Problems to linebreak with an int in JLabel
  • HTML download movie download link
  • Controls, properties, events and timers running in design time
  • Updating server-side rendering client-side
  • Updated Ionic CLI but shows previous version (Windows)
  • How to make Safari send if-modified-since header?
  • VBA Convert delimiter text file to Excel
  • Adding custom controls to a full screen movie
  • How to pass list parameters for each object using Spring MVC?
  • How to set the response of a form post action to a iframe source?
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • JaxB to read class hierarchy
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize