Paula Rodrigues• 250
@paulaabro
Submitted
Any hint on how to position the background images is appreciated.
Yashvir Singh
@Yashvir821
All comments
- Yashvir Singh• 120
@Yashvir821
Posted
Hello Paula, congratulations on your solution!
I know that's tricky to resize and move the background image here and there if you're not familiar with the property that does this change, I knew it only because I saw it on w3schools.com. But there is 1 way to do that:
The best and easier way is using the code given below: body {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
background-position: 500px 200px; }
And if you are not familiar with multiple background images then you can write the code given below:
body{
background-image: url(img_flwr.gif), url(paper.gif);
background-repeat: no-repeat, no-repeat;
background-size: 300px 100px, 200px 300px;
background-position: 500px 200px, 100px 250px; }
I hope its helpful :)
0 - Jo Blaszak• 110
@jblaszak
Submitted
Had some difficulties with getting the background images properly aligned. I tried two approaches, once using background-image and another using images and absolute positioning. Neither one seemed to give the result of the images being a set distance from the center of the screen. Any tips? Would be greatly appreciated!
EDIT: Turns out some of the problem was related to the CSS reset I was using that set 'max-width: 100%'
Yashvir Singh• 120@Yashvir821
Posted
Hello Jo Blaszak, congratulations on your solution!
I know that's tricky to resize and move the background image here and there if you're not familiar with the property that does this change, I knew it only because I saw it on w3schools.com. But there is 1 way to do that:
- The best and easier way is using the code given below:
body {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
background-position: 500px 200px; }
And if you are not familiar with multiple background images then you can write the code given below:
body{
background-image: url(img_flwr.gif), url(paper.gif);
background-repeat: no-repeat, no-repeat;
background-size: 300px 100px, 200px 300px;
background-position: 500px 200px, 100px 250px; }
I hope its helpful :)
1
