Scaling background image
Question
I have some simple problem that I can't work around. I have the following html code
<body background='/freewifilogo.png'>
<div align="center">
<img src='/welcome.png' />
</div>
</body>
I want the background image to have the height and width to 50 %, until the picture reach size of 300*300 px. Then I want it to stop scaling.
I have been asking Google and I don't find any answer to my problem.
2 answers
solution1
0 2015-02-18 15:27:01
I don't know what you want exactly but look at this solution :
<body>
<div align="center">
<img src='http://www.getfilecloud.com/blog/wp-content/uploads/2014/01/building-blocks.jpg' />
</div>
</body>
body {
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
img {
margin-top: 10%;
}
@media (max-width: 300px) {
body {
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg') no-repeat 50%;
}
}
solution2
0 ACCPTED 2015-02-18 17:04:54
If you want to manage the size of the background image independent of the size of the page, you'll need to put it in it's own container.
For example:
<div class="container">
<div class="bkg"></div>
<div class="welcome">
<img src='/welcome.png' />
</div>
</div>
Then you can use CSS like:
.bkg {
position: absolute;
width: 100%;
height: 100%;
max-width: 300px;
max-height: 300px;
padding-bottom: 100%;
background: url(/freewifilogo.png) 0 0 no-repeat;
z-index: -1;
}
The position: absolute; takes it out of the flow of content so it doesn't affect the welcome image.
As an example, see this Fiddle. I didn't have a welcome image, so for the example I replaced it with a heading.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.