+ 2
How can I make background just one image centered in the middle?
I'd like the background image to not fill up the whole page but should be like a logo in the center of the page.
5 Answers
+ 31
As the background-attachment: fixed; property has no support in native broswers (but only in chrome), here is another solution for your problem.
<!DOCTYPE html>
<html>
<head>
<style>
body:before {
/*Desktop solution*/
/*background-image: url("http://www.sololearn.com/uploads/css_logo.png");*/
/*background-repeat: no-repeat;*/
/*background-attachment: fixed;*/
/*background-position: center center; */
/*Mobile solution*/
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
https://code.sololearn.com/WPmcx1MA2tHb/#html
+ 20
You can use background-image property.
body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Note that to position a background-image you can use pixels and percentages as well.
Example
background-position: 30% 20%;
OR
background-position: 50px 100px;
+ 5
Using a CSS framework like bootstrap, divide your website into a grid. Then insert background image in the middle row middle column with a width: 100%. Not only will this be perfectly in the middle, it will be responsive in all screen sizes and devices.
As developers, we must learn to utilize what is already available and leverage upon those technologies, avoiding complete code rewritting and hacking what is already written code.
+ 1
you can use background-image to image and background--attachment to fixed them or scroller them and if you won't to center them ues background-position
0
Become a web designer, then a front-end web developer, then web back-end developer, then go for mobile web: design and development. Then go for software: development and design and then go for mobile app: design and development. Then go for becoming a CEO. That's my path
Often have questions like this?
Learn more efficiently, for free:
