Web Development

CSS3 Allows Background Controlling

CSS3 Allows Background Controlling is the section 3 of Basics of CSS3.

Background of a web page can be either a color or an image. In this section we are look at the image perspective and the next section we are looking at it in colors perspective.

CSS3 contains several new background properties, which allows greater control of the background element. We are looking at each of them now.

Background Size Property

The background-size property specifies the size of the background image. So now on, what ever the actual image size is, you can define the size of the image it should displayed. With this property we can use the same image in different contexts, without uploading many images with many sizes. This can be either a percentage or a pixel value.

[code language=”css”] div{
background-size: 280px 60px;
}
[/code]

This is our original image.

ZNMD

 

See how we can have the same image with different sizes. We only uploaded this original image only.

You Only Live Once

You Only Live Once

Background Origin Property

Can you remember the box model concept we discussed in our CSS tutorial. Look at the following image to refresh your mind.

 

CSS Box Model

CSS Box Model

Blue colored area we called it content box.

Green colored area we called it padding box.

Cream colored area we called it border box. 

So we can define, in which box we need to display our background image. In the content box; Most of the time people put there, in the border box or padding box. This is the code snippet to define that.

[code language=”css”] .div1 {
background-origin: border-box;
}
.div2 {
background-origin: padding-box;
}
.div3 {
background-origin: content-box;
}
[/code]

Multiple Images

This techniques is most useful when having transparent gif, or png format images. What we are going to do now is adding an image on another image. So through the transparent areas, we can see the behind image. Code snippet goes like this.

[code language=”css”] div{
background: url(spiderman.png), url(building.jpg);
}
[/code]

We have this image which is transparent. And we used it in the front. So that’s why we we put the url of this image as the first value of background property.
Spiderman

We are going to use this image as the back. So it doesn’t need to be transparent. And that’s why its URL is the second value of the property.

Spiderman Background
You already know the background property and the way to add an image. But with CSS3 you can add multiple images, not only one. See now how it’s looks like. We swear, this image is not Photoshop. Seriously!! It is overlapping of two images.

My Combined Image

 

Isn’t this really cool. We do not need Photoshop anymore.


 

In this section we really did insanely awesome stuff using images. CSS3 is kinda cool guy introducing many many unimaginable things on the HTML web pages. Don’t forget we are not finished yet in the subject of backgrounds. Remember what we have promised in the beginning of this section. As we promised the next section is purely for background colors in different perspective.

WHAT’S NEXT?

Explore CSS3 Rainbow Background.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW