Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Expand Images in a Web Page with CSS

The tutorial will help the readers and developers to understand the process to enlarge images in their web pages for the website they are working on with the help of CSS.

One of the recommended approaches so as to enlarge an image that would make it fit to the web page background is to make use of CSS3_property.background-size which is as follows:

Listing 1: CSS3_property.background-size

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

Try to make use of the above code in the browsers IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, and this can also be used on majority of the mobile browsers.

Let us see how it works with an example. In case the browser that you are using supports background-size property of CSS3, in that case the div present below the advertisement displays picture of two cats that are stretched across the entire div. But in case the browser is unable to support the property, in that case the image will be seen in the upper left corner of the div.

Output

Figure 1: Output

Creating a Enlarged Background in Earlier version of Web browsers

In case being a developer, one is concerned about the compatibility of IE8 browser that does not support it, one can fake a stretched background. In this case you can make use of browser prefixes for Firefox 3.6 (-moz-background-size) and Opera 10.0 (-o-background-size).

The simplest of the ways so as to fake a background image is to enlarge it across the whole of the page. In this case you won’t be ending up with an extra space or worry that your text fits in the enlarged area. Let’s see how to do the same.

You need to make certain for all the browsers having 100% height, 0 margin, and 0 padding on the body of the HTML and BODYelements:

Listing 2: Fake a background image to Enlarge it

<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

1. The image that you wish to set as the background needs to be incorporated as the first element of the web page, and give it the id of "bg":

<body>
<img class='imagem_artigo' src="bgimage.jpg" alt="background image"id="bg" />
</body>

2. You need to then position the background image for the reason that it's fixed at the top left and is 100% wide and 100% in height. Incorporate the following in the style sheet:

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

3. After this, you need to incorporate to the page inside of a DIV element with an id of "content". The following needs to be added below the image:

<div id="content">All your content here - including headers, paragraphs, etc.</div>

Note: It will be very interesting to look at the page at this moment where the image should display enlarged however we have the entire content that is missing. Why? Majority of the browsers won’t display the image for the reason that the background image is 100% in height, and the content division is after the image in the flow of the document.

4. The content needs to be positioned for the reason that it's relative and has 1 as its z-index. This will result in bringing it above the background image in standards-compliant browsers. Add the following to the style sheet:

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

5. But there is lot more too done like we all know that Internet Explorer 6 isn't standards compliant and we still have lot of issues with the same. We have lot many ways that would hide the CSS from every browser but IE6, however the simplest and easiest but least threatening is ti make use of the conditional statements. You need to insert the subsequent after the style sheet:

...
</style>
<!--[if IE 6]>
<![endif]-->

6. And then, within the highlighted comment, there is a need to incorporate another style sheet with some styles to get IE 6 to be in power:

<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->

7. This needs to be tested in IE 7 and IE 8 also where you require adjusting the comments so as to support them as well.

Faking an Enlarged Background Image in a smaller space

The similar technique can be used so as to fake an enlarged background image across a DIV or other element on your web page that is not easy as it seems for the reason that there is a need to make use of absolute positioning or have awkward spacing issues for other parts of your page.

1. You need to actually place the image on the page that is intended to be used as the background of the page.
<img class='imagem_artigo' src="bgimage.jpg" alt="background" id="bg" />

2. As far as the style sheet is concerned; we will set a width and height for the image. The point to note here is that one can percentages for width or height however we find it very easy so as to adjust with length values for the height.

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

3. Then we need to actually place a content in a div with the id "content" in the similar way that is being implemented above:

<div id="content">Put the Entire content over here</div>

4. The next step is to style the content div that would be of the same width and height as the background image:

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

5. After this, the need is to position the content up the same height as the image for the reason that in case we have an image that is 30em you would have a style of top: -30em; and it is a must to put a z-index of 1 on the content.

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

6. Finally, we need to add a z-index of -1 for IE 6 users in the same way we did above:

<!--[if IE 6]>
<style type="text/css">
img#bg { z-index: -1; }
</style>
<![endif]-->

Please make certain to test the same in majority of the web browsers and in case the content is modified, there will be a need to modify the size of the container as well as the background image else the end results will be a large deviation from the expected outcome.

Conclusion

The tutorial focussed on the process to enlarge a background image on the web page with the help of CSS and how to make them work in different browsers.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login