Need help getting my photo centered. | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 8

Need help getting my photo centered.

Background image shows but heads are cut off. The picture only looks right when I shrink the screen. .showcase:before { content: ''; background: url(img/CGA.png) no-repeat center center/cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;

10th Apr 2020, 5:26 PM
Corey
50 Answers
+ 8
Ok bro I will tell you tomorrow now come on for personal chat . Now it's time to sleep for me . Sorry ! But tomorrow I will surely help you .
10th Apr 2020, 6:33 PM
Ayush Kumar
Ayush Kumar - avatar
+ 7
Your image file isn't accessible for us (the code would not display it, and we will not be able to see what's it's output regarding the image placement ;))
10th Apr 2020, 5:52 PM
visph
visph - avatar
+ 6
Hay where html part it is showing nothing had you gone through my code bit ??
10th Apr 2020, 5:45 PM
Ayush Kumar
Ayush Kumar - avatar
10th Apr 2020, 5:41 PM
Corey
+ 5
You've shared only the css ^^ Anyway, if you don't want your image to be cropped (depending on the display aspect ratio), you could replace 'cover' by 'contains' ;)
10th Apr 2020, 5:46 PM
visph
visph - avatar
+ 4
Heads are still cut off in full screen.
10th Apr 2020, 5:32 PM
Corey
+ 4
Hay Visph see his code again he has used background instead of background-image and not added ; at the end . Then how it will work ?? Hay corey I suggest you to write the code properly. Please go through your code again
10th Apr 2020, 6:24 PM
Ayush Kumar
Ayush Kumar - avatar
+ 4
But Corey had just told that the new edited code is working for him and the last one is edited by me
10th Apr 2020, 6:29 PM
Ayush Kumar
Ayush Kumar - avatar
+ 4
Hmmm That's ok
10th Apr 2020, 6:31 PM
Ayush Kumar
Ayush Kumar - avatar
+ 4
Please when you have any doubts in Programming codes post your code completely. It will help to solve your problem easily. <img align="center"src="file name">
12th Apr 2020, 12:12 PM
A S Raghuvanshi
A S Raghuvanshi - avatar
+ 3
Add this three lines in your code and it will work fine height:100%; background-repeat:no-repeat; background-size:cover; get the sample here https://code.sololearn.com/WuaMEzcN4Jv1/?ref=app
10th Apr 2020, 5:29 PM
Ayush Kumar
Ayush Kumar - avatar
+ 3
Have tried 'contains' ?
10th Apr 2020, 5:53 PM
visph
visph - avatar
+ 3
How the heck did that happen?
10th Apr 2020, 5:53 PM
Corey
+ 3
Your image is now correctly referenced (no need to let the blank drawing ;)) My apologize however: that's 'contain' and not 'contains' (without tge 's' ^^) Try it, and say if that fits better to you?
10th Apr 2020, 6:21 PM
visph
visph - avatar
+ 3
What did you change? And thanks :)
10th Apr 2020, 6:23 PM
Corey
+ 3
Is it now working????
10th Apr 2020, 6:25 PM
Ayush Kumar
Ayush Kumar - avatar
+ 3
TR CodeWorld [AYUSH.ks] OP's last code was working fine for me... ... the trailing comma is not missing in this last version... ... and it's totally valid to shorthand background-image to image (we should only be aware of possible values overiding by doing so).
10th Apr 2020, 6:28 PM
visph
visph - avatar
+ 3
I visually not noticed difference between his last attempt and yours ^^
10th Apr 2020, 6:30 PM
visph
visph - avatar
+ 3
<div> <center> <img src="picture.jpg" alt="picture" /> </center> </div>
10th Apr 2020, 6:42 PM
Auwal Iliyasu Ishaku
Auwal Iliyasu Ishaku - avatar
+ 3
Never use <center>in html
10th Apr 2020, 10:05 PM
Federico Nicolas Aguirre
Federico Nicolas Aguirre - avatar