How to stretch a background image to fit a web page

Give your website a visual interest with background graphics

How to stretch a background image to fit a web page

The image is an important part of attractive website design. It includes background image use. These are images and graphics used as part of the page, such as images presented as part of content pages. Images in this background can add visual interest to a page and help you achieve the visual design you can find on any page.

If you start working with background images, then you will definitely go into a scene where you want to extend the image to scale the image.

This is especially true for a responsive website that is widely distributed in devices and screen sizes.

This desire to extend a background image is a very common desire for web designers because each image fits in a website's place. Expanding the image allows Flex to fit the page even though it is expanded or narrowed in the browser window instead of fixed size.

One of the best ways to extend the background of a page is to use CSS3 property for the background-size, here's an example which uses a background image for a body of a page and which sets 100% size so it will always extend to fit the screen.

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

According to Caniuse.com, this property works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ and all major mobile browsers. This covers you for all the modern browser available today, which means that you will use this person without fear that it will not work on any person's screen.

Facting a Streched Background in Old Browsers

It is very unlikely that you have to support older browsers than IE9, but let's say you are worried that IE8 does not support this feature. In that case, you can fake a stretch background. And you can use browser prefix for Firefox 3.6 (-moz-background-size) and Opera 10.0 (-o-background-size).

A simple padic image of mesh is the easiest way to expand it across the whole page then you do not have to finish extra space or think that your text fits the area to expand. Here's how to do it:

id= "bg" />

First, make sure that all browsers have 100% height, 0 margins and 0 padding and HTML BD elements. Place the following in the heading of your HTML document:

As the first element of the web page, add an image that you want to be backgrounded and give it "bg" id:

Set the background image so that it is set to the top and left and 100% wide and 100% the height. Add to your style sheet:

img#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}

Add "DIV" below the image to the "content" Add all your content to a page inside an DIV component with an ID:

All your content here - including titles, paragraphs, etc.

Note: Now your page is interesting to see. The image should be expanded, but your content is completely missing. Why? Since the background image is 100% height, and the contents of the document are in the content section after the image - most browsers will not show it.

Set your content so that it is relative and has 1 z-index This will bring it to the standard browsers on the background image. Add to your style sheet:

#content {
  position: relative;
  z-index: 1;}

But you are not working. Internet Explorer 6 does not agree with values ​​and there are still some problems. There are many ways to spread CSS from every browser but IE6, but easily (and other problems are not likely to be different) is to use conditional comments on your document head after following your stylesheets:

Inside the highlighted comment, add another style sheet to some styles so that IE 6 plays well:

Do not forget to check IE 7 and IE 8 also you may need to coordinate their support comments as well. However, it worked when I tested it.

OK - This confession WAY overkill requires very little site IE 7 or 8 support, much less IE6!

For example, this method is ancient and probably unnecessary for you. I leave it here as a model of curiosity as much more difficult things before all our browsers are acting so nicely together!

Faking a Stretched Background Image Over a Smaller Space

You can use a similar technique in a stretched background image to mesh across a div or other material on your web page. It's a bit trickier that you want to use absolute positioning for other parts of your position or use strange spacing issues.

Put the picture on the page that I want to use as a background.

Define a width and height for the image in the style sheet. Note that you can use percent for width or height, but I find it easy to adjust to the length values ​​for height

img#bg {
  width: 20em;
  height: 30em;}

Place your content with a div of "contents" as we do above:

All your content here

Structure to be the same width and height as the background image contents:

div#content {
  width: 20em;
  height: 30em;}

Then position the content up to the same height as the image. So if your picture is 30EM you will have a style at the top: -30em; Do not forget to put a z-index of 1 in the content.

#content {
  position: relative;
  top: -30em;
  z-index: 1;
  width: 20em;
  height: 30em;}}

Then add Z-index of -1 for IE 6 users, as you did above:

Again, with the background-size broad browser support now, this process is very unnecessary and presented as a product of a past era. But if you want to use this method you do not forget to check it as many browsers as it does.

And if your content changes, then you have to resize the image of your container and background, otherwise you will end up with strange results.

Tag : how to fit background image in html using notepad, html background image stretch to fit without css, how to make background image fit to screen html, css background image size to fit screen, html background image fit or scale to screen size, css background image stretch to fill, background image css, html background image full screen, Use CSS3 to Stretch a Background Image to Fit a Web Page - Lifewire, Creating a Scaling Responsive Background Image, Perfect Full Page Background Image, Responsive Full Background Image Using CSS, Full Screen Stretching Background Image CSS, Scaling background images - CSS: Cascading Style Sheets, Website Background Images - The Ultimate Design Guide