CODEWITHSUNDEEP
htmlcss
rogerthat
rogerthat

Reputation: 1815

fixed background in responsive design HTML/CSS

I am converting a static page to responsive and the page has a fixed background image. The only way I can think of to deal with this is to re-make the image so it can be scaled as the screen increases and decreases. Any ideas, thoughts?

current css

body{
margin:0; 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px;
color:#f1f1f1; 
background: #00171d url(../images/splash-images/body-bg.jpg) repeat-x fixed;
}

Upvotes: 0

Views: 308

Answers (1)

Moises Hidalgo
Moises Hidalgo

Reputation: 133

Instead of re-editing the image where you would need to make multiple images for different screen sizes. Try this

Fixed div with 100 percent width and height and the image file inside with a 100 percent width and height as well like so:

<style>
   #fixed_div { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
   #fixed_div img { width:100%; height:100%; }
</style>

<div id="fixed_div">
   <img src="img">
</div>

The code will fluidly re-size the image when the browser is re-sized.

use css's min-width, max-width, min-height and max-height to set boundaries to the image. also use z-index to correctly stack you divs.

Upvotes: 1

Related Questions