Question about headers (HTML). | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

Question about headers (HTML).

Does anyone know how I can put an image in a header so that it shows up in the corner as a logo? Thanks for reading guys! Domino :-)

4th Aug 2023, 7:37 PM
DominoPeeps
DominoPeeps - avatar
4 Answers
+ 2
<!DOCTYPE html> <html> <head> <title>Logo in Header</title> <style> #logo { position: absolute; top: 10px; left: 10px; width: 100px; /* Adjust the width as needed */ height: auto; /* Maintain aspect ratio */ } </style> </head> <body> <header> <img src="logo.png" alt="Company Logo" id="logo"> <h1>Welcome to our website</h1> </header> <!-- Rest of your webpage content --> </body> </html>
5th Aug 2023, 12:50 AM
๐€๐ฒ๐ž๐ฌ๐ก๐š ๐๐จ๐จ๐ซ
๐€๐ฒ๐ž๐ฌ๐ก๐š ๐๐จ๐จ๐ซ - avatar
+ 1
When you say header, do you mean like the icon that is beside the title? It's called a favicon and you can see this from W3 Schools om how to get it working: https://www.w3schools.com/html/html_favicon.asp
4th Aug 2023, 8:17 PM
Justice
Justice - avatar
+ 1
Refer this https://code.sololearn.com/WHmU8sUTFIMb/?ref=app Replace "path/to/your/logo.png" with the actual path to your logo image. The img element with the class "logo" will be floated to the left, displaying the logo in the corner, and other header content will be displayed next to it. Adjust the height, width, and other styles to fit your logo and header design preferences.
5th Aug 2023, 4:51 PM
โ€Ž เบธ
0
You will need to reduce the size of your image as small as possible and you will be able to write text close to it because images are inline element
4th Aug 2023, 8:18 PM
Aweneg Rooney
Aweneg Rooney - avatar