CODEWITHSUNDEEP
htmlcssbackgroundresizescreen
kichadi
kichadi

Reputation: 11

Resizing a background image to automatically fit multiple screens?

I'm very new to this but I'm working on a website in HTML/CSS. The background looks fine on my macbook pro, but when I view my site on any larger screen, the background repeats and the site content stays in the top left hand corner instead of moving to the middle of the screen. Is there any way I can make my site look the same on larger screens as it does on my own? Is there a tag to resize an entire website to fit whatever screen is viewing it?

Thanks

Upvotes: 0

Views: 775

Answers (3)

Frank Fang
Frank Fang

Reputation: 2162

body{
    background: url(path/to/your/image) no-repeat center top;
}

Try this. It has the background move to the middle of the screen.

It's not easy to scale the background image. It's not a good idea to scale it, either.

Upvotes: 0

user3037493
user3037493

Reputation: 312

before you study responsive design, you might want to learn more about CSS in general. a lot of people don't like w3, but they do have an easy to understand (and quick!!) css class tutorial to go through. http://www.w3schools.com/css/default.asp responsive design would be step #2 to learn about.... its VERY important thing to keep in mind when you create styling.

also, here is a stackoverflow question that answers your question Stretch and scale CSS background ....and some more help on css backgrounds http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

Upvotes: 0

eebbesen
eebbesen

Reputation: 5148

You should explore responsive web design. Do a web search for the term "responsive css" and you'll get a plethora of frameworks and tools to help you out.

Upvotes: 1

Related Questions