CODEWITHSUNDEEP
htmlcssbackground
cameraobscura
cameraobscura

Reputation: 177

How to add centered background using css

I want to use this kind of image for my background. http://www.wallpaperpin.com/xres/1920x1440-download-free-awesome-psd-designs-website-backgrounds.jpg How can I make it look "centered" (I mean the light rays to be displayed as if they are in the middle of the site) using css on any screen resolution it will be browsed? I mean to be displayed in the same way both on 1440x1050 or 1920x1080 or on any mobile device.

Do I have to find other pictures with other resolutions to be displayed depending on the visitor's resolution? Will that require php-script?

Upvotes: 0

Views: 75

Answers (2)

Nicholas-c
Nicholas-c

Reputation: 123

background              : url('images/background.jpg') top center no-repeat
background-size         : 100%;

making it top center rather than center center makes it from the top... (Duh) and background-size: 100% makes the image the size of the browser window.

Upvotes: 1

Praxis Ashelin
Praxis Ashelin

Reputation: 5217

body{
   background: url("imageurl.jpg") center center;
}

If you want it to scale to the browser resolution, you can also use

background-size: cover;

Upvotes: 1

Related Questions