You are here:

Web Design/scaling background image within a div

Advertisement


Question
Hello, Daniel Ruffle

I was wondering how I could make a background image within a div with unspecified size
scale, when the browser resizes.

I am using twitter bootstrap to help me achieve this, but so far was unsuccessful.

Thank you

PS: just to illustrate my question better
..
<body>
<div id='header'></div>
<div id='container'>

</div>
<div id='footer'></div>
</body>

<style>
#container{
background-image: url('.../path to image');
....
}
</style>

Answer
Hi Jake

It is certainly possible but for now you may need to use Javascript / JQuery to get the desired effect. You can do it in CSS3 but this doesn't work properly in all browsers.

A couple of articles that should help.

http://nooshu.com/jquery-plug-in-scalable-background-image

Unless you use and image instead of backgroundimage:

http://stackoverflow.com/questions/4783075/scaling-background-image-in-a-div

I hope this helps.

Dan  

Web Design

All Answers


Answers by Expert:


Ask Experts

Volunteer


Daniel Ruffle

Expertise

I can answer questions on most areas of web design & development - including: html5, css3, JavaScript, php, search engine optimisation, mobile web development & responsive design.

Experience

I have been in the web design & development sector for 10 years and have been running my own web design company for 10 years. Working with lots of completed projects within that time.

Education/Credentials
I have mostly been self taught which is the way I learn best. I have been on lots of training courses, read lots & lots of books. Within this sector though I find the best way to learn is to get stuck in.

©2016 About.com. All rights reserved.